css - div - html container用法




兩個列佈局,其中一個在CSS中具有固定的寬度 (4)

我想要一個漂亮的2列佈局使用CSS浮動的。

#1列#160#列#2#100%(即剩餘空間)。

我想首先放置Col#2的div,所以我的佈局如下所示:

<div id="header"></div>
<div id="content">
     <div id="col2"></div>
     <div id="col1"></div>
</div>
<div id="footer"></div>

什麼必須得到這個效果?



您必須在第一列使用float:left,在第二列使用float:right


我想你可以做這樣的事情。

div#col2 {
  padding-left: 160px;
  width: 100%;
}

div#col1 {
  float: left;
  width: 160px;
}

這依賴於#col1之前#col2 ,這可能會使其無法使用。

這不會,但依靠#col1是更長的時間:

#content {
  position: relative;   
}
div#col2 {
  width: 160px;
  position: absolute;
}

div#col1 {
  width: 100%;
  margin-left: 160px;
}

這將保持腳註到位。

div#footer {
  clear: both;
}

雖然這個問題是多年以前的,但我為以後的參考和類似案例提供了這個有用的答案。

#col1放在#col1 #col2之前的標記中,如果你有LTR lauout(如果你有一個RTL佈局,然後浮動到左邊),並且讓另一個col overflow: hidden ,你可以把它浮動到右邊。

請注意,父(#內容)應該有overflow: hidden

#content{
  overflow: hidden;
  padding: 20px 0;
  height: 100px;
  background-color: #cdeecd;
}

#content #col1{
  float: right;
  width: 160px;
  height: 100px;
  background-color: #eecdcd;
}

#content #col2{
  height: 100px;
  overflow: hidden;
  background-color: #cdcdee;
}
<div id="content">
     <div id="col1"></div>
     <div id="col2"></div>
</div>





layout