如何在自動寬度div旁邊添加固定寬度的div？

我目前有一個div寬度：自動填充整個屏幕寬度，但我想在右側放置側欄。當我浮動的寬度：自動div左側和固定寬度div的權利它下而代之。我基本上在尋找類似於reddit所具有的東西，在右側寬度的搜索欄中內容自動調整爲頁面寬度。感謝如何在自動寬度div旁邊添加固定寬度的div？

來源

2011-06-14 Undefined

你可以這樣說：

假設你有一個父容器，其擴展以適應頁面內那些2周的div：

<div id="container"> 

    <div id="autowidth">text expands her...</div> 

    <div id="fixed">This is a fixed column</div> 

</div>

在你的CSS：

#container { 
    width:100%; 
    border:1px solid black; 
    padding-right:200px; 
} 

#autowidth{ 
    width:100%; 
    background-color:red; 
    float:left; 
} 
#fixed{ 
    width:200px; 
    background-color:green; 
    float:right; 
    margin-right:-200px; 
}

基本上，父容器將所有東西放在一起。它有一個200px的填充（右邊欄的寬度），所以它的內容不會超出這一點。反過來，右邊欄的邊距爲-200px，這樣它就會強制父邊框填充的邊界，並將其自身置於最前方。實際上，其他div現在只有父容器提供的空間，受其填充限制，所以其實際上100％（100％ - （父母的填充））。你可以在這裏看到一個這樣的工作結果：jsfiddle.

我很確定那裏可能會有更優雅的解決方案，所以對我一無所知。

，如果你想給一個背景，就像它是2周的cols，你可以去爲經典的「人造列的背景（見a list apart例子）

來源

2011-06-14 19:03:27

@Lee雅各布森如果我誤解了你的問題，或者你需要更多的幫助，只是LMK – 2011-06-14 19:09:19

這在Chrome，火狐和IE9 *爲我工作，除了* **你不應該設置寬度爲容器**，當我這樣做時，它比可用的水平屏幕空間更寬，出現水平滾動。 – axk 2011-07-10 11:25:20

只要您指定邊界框盒模型，這將在IE8和IE7中工作！我只是測試它。如果你想瞄準IE7，你必須得到boxsizing.htc黑客腳本。 -webkit-box-sizing：border-box; -moz-box-sizing：border-box;盒子尺寸：邊框; *行爲：url（/scripts/boxsizing.htc）; – James 2012-11-17 05:42:41

你不嚴格需要一個div容器。爲了簡潔，我做了內聯。

<div style="float:right; width:14em; background-color:#CCC;"> 
    <p>This div is fixed-width.</p> 
</div> 
<div style="background-color:#EEE; margin-right:14.5em;"> 
    <p>This div is auto-width.</p> 
</div>

來源

2011-06-14 19:11:36

答案不適用於我，我認爲它已過時。現在你必須指定框的大小：邊框用於填充以計算寬度，但感謝靈感。這是我的解決方案。

#autowidth { 
    float:left; 
    width:100%; 
    padding-right:200px; 
    box-sizing:border-box; 
} 

#fixed { 
    float:right; 
    width:200px; 
    margin-left:-200px; 
}

來源

2015-06-21 06:47:13

如何在自動寬度div旁邊添加固定寬度的div？

回答

相關問題