我試圖將兩個div并排放置，并使用下面的CSS。

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

HTML很簡單，在一個包裝器div中有左右兩個div。

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

我嘗試了很多次在StackOverflow和其他網站上尋找更好的方法，但是沒有找到確切的幫助。

因此，乍一看，代碼運行良好。問題是，當我增加寬度(%)時，左邊的div自動獲得填充/邊距。因此，在65%的寬度，左格有一些填充或空白，并沒有完全與右格對齊，我試圖填充/空白0，但沒有運氣。其次，如果我放大頁面，右邊的div會滑到左邊的div下面，這就像是不流暢的顯示。

注:不好意思，我搜了很多。這個問題已經被問了很多次，但是那些答案對我沒有幫助。我已經解釋了我的問題所在。

我希望有一個解決辦法。

謝謝你。

編輯:對不起，我的HTML問題，有兩個“框”div在左側和右側，他們有填充%，所以左側顯示更多的填充，因為更大的寬度。抱歉，上面的CSS工程完美，其流體顯示和固定，抱歉問錯了問題...

請嘗試這樣的系統:

.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;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

使用flexbox很容易做到這一點:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

為我當前的站點使用這個CSS。它工作完美！

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

以下是我對那些正在谷歌搜索的人的回答:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

這是HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

像這樣分開。這將并排對齊兩個div。

.my-class {
  display : inline-flex;
}

你也可以使用網格視圖，它的響應也是這樣的:

#wrapper {
   width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

#left{
    text-align: left;
    grid-column: 1/4;
}

#right {
    text-align: right;
    grid-column: 4/6;
}

HTML應該是這樣的:

<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>

以下是更多信息的鏈接:

https://www.w3schools.com/css/css_rwd_grid.asp

我很新，但我想我可以分享我的小經驗

#wrapper{
  display: grid;
  grid-template-columns: 65% 1fr;
}
#left {
  grid-column:1;
  overflow: hidden;
  border: 2px red solid;
}

#right {
  grid-column:2;
  overflow: hidden;
  border: 2px blue solid;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

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

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

<div style="height:50rem; width:100%; margin: auto;">
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
</div>