如何并排放置div我有一個(gè)主要的包裝div設(shè)置為100％寬度。在里面，我想有兩個(gè)div，一個(gè)是固定寬度，另一個(gè)填充剩余的空間。如何浮動(dòng)第二個(gè)div以填充剩余的空間。謝謝你的幫助。
3 回答
慕姐8265434
TA貢獻(xiàn)1813條經(jīng)驗(yàn) 獲得超2個(gè)贊
有很多方法可以滿足您的需求：
使用CSS
float屬性：<div style="width: 100%; overflow: hidden;"> <div style="width: 600px; float: left;"> Left </div> <div style="margin-left: 620px;"> Right </div></div>
使用CSS
display屬性 - 可以用來(lái)使divs表現(xiàn)得像table：<div style="width: 100%; display: table;"> <div style="display: table-row"> <div style="width: 600px; display: table-cell;"> Left </div> <div style="display: table-cell;"> Right </div> </div></div>
有更多的方法，但這兩個(gè)是最受歡迎的。
萬(wàn)千封印
TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
CSS3引入了靈活的盒子（又名flex盒子），它也可以實(shí)現(xiàn)這種行為。
只需定義第一個(gè)div的寬度，然后給第二個(gè)div設(shè)置一個(gè)flex-grow值，1使其能夠填充父級(jí)的剩余寬度。
.container{
display: flex;}.fixed{
width: 200px;}.flex-item{
flex-grow: 1;}<div class="container"> <div class="fixed"></div> <div class="flex-item"></div></div>
請(qǐng)注意，彈性框不能與舊瀏覽器向后兼容，但對(duì)于定位現(xiàn)代瀏覽器來(lái)說(shuō)是一個(gè)很好的選擇（另請(qǐng)參見Caniuse和MDN）。CSS Tricks提供了有關(guān)如何使用彈性框的完整指南。
慕哥9229398
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超6個(gè)贊
我對(duì)HTML和CSS設(shè)計(jì)策略知之甚少，但是如果你正在尋找一些簡(jiǎn)單且適合屏幕的東西（就像我一樣），我相信最直接的解決方案就是讓div表現(xiàn)為單詞一個(gè)段落。嘗試指定display: inline-block
<div style="display: inline-block"> Content in column A</div><div style="display: inline-block"> Content in column B</div>
您可能需要也可能不需要指定DIV的寬度
添加回答
舉報(bào)
0/150
提交
取消