我試圖并排放置兩個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％的寬度處，左div有一些填充或邊距，并且與右div并不完全對齊，我嘗試填充/邊距0但沒有運氣。其次，如果我放大頁面，則右div會滑到左div下方，這就像沒有流暢的顯示一樣。注意：很抱歉，我進行了很多搜索。這個問題已經被問過很多次了，但是這些答案并沒有幫助我。我已經說明了我的問題所在。我希望有解決辦法。謝謝。編輯：對不起，我是HTML問題，在左右兩側都有兩個“ box” div，它們的填充百分比為％，所以左側由于寬度較大而顯示了更多的填充。抱歉，以上CSS完美運行，顯示流暢并已修復，很抱歉提出錯誤的問題...
3 回答
阿晨1998
TA貢獻2037條經驗 獲得超6個贊
嘗試這樣的系統：
HTML：
<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>
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;
}
如果您在另一個div上使用margin-left等于第一個div的寬度，則只需浮動一個div。無論變焦如何，這都將起作用，并且不會出現子像素問題。
守候你守候我
TA貢獻1802條經驗 獲得超10個贊
使用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>
- 3 回答
- 0 關注
- 443 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消