我試圖并排放置兩個(gè)div，并使用以下CSS。#left { float: left; width: 65%; overflow: hidden;}#right { overflow: hidden;}HTML很簡(jiǎn)單，在包裝div中有兩個(gè)左和右div。<div id="wrapper"> <div id="left">Left side div</div> <div id="right">Right side div</div></div>我已經(jīng)嘗試了很多次，也在StackOverflow和其他站點(diǎn)上尋找更好的方法，但是找不到確切的幫助。因此，代碼乍一看效果很好。問題是，當(dāng)我增加（％）的寬度時(shí)，左div自動(dòng)獲得填充/邊距。因此，在65％的寬度處，左div有一些填充或邊距，并且與右div并不完全對(duì)齊，我嘗試填充/邊距0但沒有運(yùn)氣。其次，如果我放大頁(yè)面，則右div會(huì)滑到左div下方，這就像沒有流暢的顯示一樣。注意：很抱歉，我進(jìn)行了很多搜索。這個(gè)問題已經(jīng)被問過很多次了，但是這些答案并沒有幫助我。我已經(jīng)說(shuō)明了我的問題所在。我希望有解決辦法。謝謝。編輯：對(duì)不起，我是HTML問題，在左右兩側(cè)都有兩個(gè)“ box” div，它們的填充百分比為％，所以左側(cè)由于寬度較大而顯示了更多的填充。抱歉，以上CSS完美運(yùn)行，顯示流暢并已修復(fù)，很抱歉提出錯(cuò)誤的問題...
3 回答
阿晨1998
TA貢獻(xiàn)2037條經(jīng)驗(yàn) 獲得超6個(gè)贊
嘗試這樣的系統(tǒng)：
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;
}
如果您在另一個(gè)div上使用margin-left等于第一個(gè)div的寬度，則只需浮動(dòng)一個(gè)div。無(wú)論變焦如何，這都將起作用，并且不會(huì)出現(xiàn)子像素問題。
守候你守候我
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
使用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>
添加回答
舉報(bào)
0/150
提交
取消