<p>我正在嘗試並排放置兩個 div 並使用以下 CSS。 </p> <pre class="brush:css;toolbar:false;">#left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } </pre> <p>HTML 很簡單，一個包裝 div 中包含左右兩個 div。 </p> <pre class="brush:html;toolbar:false;"><div id="wrapper"> <div id="left">Left side div</div> <div id="right">Right side div</div> </div> </pre> <p>我在 StackOverflow 和其他網站上嘗試了很多次尋找更好的方法，但找不到確切的幫助。 </p> <p>所以，乍一看，程式碼運作良好。問題是，當我增加寬度（%）時，左側 div 會自動獲得填充/邊距。因此，在 65% 寬度時，左側 div 有一些填充或邊距，並且與右側 div 不完全對齊，我嘗試將填充/邊距設為 0 但沒有成功。其次，如果我放大頁面，右側 div 會滑到左側 div 下方，這就像不流暢的顯示。 </p> <p>註：抱歉，我查了很多資料。這個問題已被問過很多次，但這些答案對我沒有幫助。我已經解釋了我的案例中的問題所在。 </p> <p>我希望能解決這個問題。 </p> <p>謝謝。 </p> <p>編輯：抱歉，我的 HTML 問題，左側和右側都有兩個“box”div，它們的填充以％為單位，因此左側由於寬度較大而顯示更多填充。抱歉，上面的 CSS 工作完美，其流暢的顯示和固定，抱歉問了錯誤的問題...</p>

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}