如何使2 div的寬度為100％

Question

我的頁面上有2個div

<div id="main"></div>
<div id="panel"></div>

並使用float將main置於左側，panel置於右側

#photos-main {
float: left;
width: 800px;
position: relative;
}

#panel {
float: left;
margin-left: 830px;
position: absolute;
}

我想讓面板填充左側頁面空間，我應該使用哪個CSS？

Answer 1

只是不要浮動它，並使其相對定位。 還要取出邊距。 浮動的“ main”表示它始終一直位於“ panel”的左側。 如果根據需要定義“ main”，“ panel”將自動占用剩余空間。

#photos-main {
float: left;
width: 800px;
position: relative;
}

#panel {
}

Answer 2

看起來您正在嘗試構建一些布局，對嗎？ 如果是這種情況，請考慮實施（從中學習）這些鏈接中介紹的一些技術：

40關於CSS布局的教程和技巧

CSS定位

完美的三列布局

希望能幫助到你！

Answer 3

您可以使用以下方法進行浮動：

#photos-main {
 float: left;
 width: 800px;
}

#panel {
 float: right; /*to have the panel on the right side*/
 width: 100px; /*with a width of 100px*/
}

然后，必須用另一個包裝兩個Tag，這兩個標簽的總寬度相同。

為了弄清這兩列的布局並在其下方放置一個頁腳，請在HTML結構中放置另一個頁腳，並在css中設置一個簡單的“ clear：both;”，以便停止浮動。

完整樣本

的HTML

<div id="wrap">
  <div id="photos-main"></div>
  <div id="panel"></div>
  <div id="clear"></div>
</div>

的CSS

#wrap {
 width: 900px;
}

#photos-main {
 float: left;
 width: 800px;
}

#panel {
 float: right; /*to have the panel on the right side*/
 width: 100px; /*with a width of 100px*/
}

#clear {
 clear:both;
}