並排浮法DIV側 - 兩個佈局

是否有在div（#contentwrapper）取所有剩餘的寬度，同時對下一個例子浮動並排的可能性：並排浮法DIV側 - 兩個佈局

#maincontainer { 
 
    width:1000px; 
 
    height: 100%; 
 
    display:inline-block; 
 
} 
 
#leftcolumn { 
 
    float:left; 
 
    width: 100px; 
 
    height:20px; 
 
    background: blue; 
 
} 
 
#contentwrapper { 
 
    float:right; 
 
    width:900px; 
 
    height: 20px; 
 
    background-color: red; 
 
}

<div id="maincontainer"> 
 
    <div id="leftcolumn"></div> 
 
    <div id="contentwrapper"></div> 
 
</div>

JsFiddle

來源

2015-07-18 Bilal075

什麼你的意思是並排浮動嗎？ –

如果某人的回答解決了您的問題，請考慮使用大複選框接受它作爲答案。如果你覺得你已經回答了你自己的問題，你可以添加你自己的答案並接受它。 –

-1

您可以使用表格而不是div。或者讓div使用CSS來表現爲表格。

當您在一行中有兩個表格單元格並將寬度設置爲1時，另一個將填充剩餘空間。

不知道這是否被認爲是最佳做法。

來源

2015-07-18 22:22:35

雖然這是一個好主意。此外爲什麼你會認爲這是一個「壞」的做法？ – Bilal075

也許表格是passé。有可能已經有一些CSS3替代方案：p –

啊，好吧..使用原始表格標籤解決了問題。謝謝你的想法！ – Bilal075

嘗試使用flexbox。它比使用表格更好。確保在其中包含供應商前綴。

https://jsfiddle.net/qa6cds9c/

<div id="maincontainer"> 
    <div id="leftcolumn"></div> 
    <div id="contentwrapper"></div> 
</div> 

#maincontainer { 
    border: 1px solid red; 
    display: flex; 
} 

#leftcolumn { 
    border: 1px solid blue; 
    height: 400px; 
    width: 100px; 
} 

#contentwrapper { 
    border: 1px solid green; 
    height: 400px; 
    flex: 1; 
}

來源

2015-07-19 00:41:42

在您的答案中添加前綴會很好。也許還支持瀏覽器的鏈接，因爲它不完全支持？如果你添加這些，我會加一個。 –

這真的很簡單。使用好醇」 CSS：

float-left只有左元素
添加margin-left到右列，以彌補左邊的一個寬度：

#leftcolumn { 
 
    float:left; 
 
    width: 100px; 
 
    background: blue; 
 
} 
 
#contentwrapper { 
 
    margin-left: 100px; /* same as #leftcolumn width */ 
 
    background: red; 
 
}

<div id="maincontainer"> 
 
    <div id="leftcolumn">left</div> 
 
    <div id="contentwrapper">right<br>contentwrapper</div> 
 
</div>

來源

2015-07-19 00:53:04

這裏的contentwrapper也在左列後面。當你開始添加內容或改變高度時，這是一個問題。 –

@JanJoukeTjalsma喔謝謝！我忘了添加左邊距！ ♪♫ –

不客氣。 +1 –

並排浮法DIV側 - 兩個佈局

回答

相關問題