Question

从布局开始到两列，其中列左侧是固定的，列右侧是液体，我需要添加第三列widht固定。我有这段代码：

<did id="#container">
  <div id="#col1"> left fixed 15em </div>
  <div id="#col2"> center liquid </div>
  <div id="#col3"> right fixed 15em </div>
</div>

用这个css：

#container {
  background-color: #ffffff;
  height: auto;
  overflow: hidden;
}
#col1 {
  float: left;
  margin: 1em;
  padding: 0.5em; 
  width: 15em;
}
#col2 {
  float: none; 
  width: auto;
  overflow: hidden;
  margin: 1em;
  padding: 0.5em; 
}
#col3 {
  float: right; 
  margin: 1em;
  padding: 0.5em; 
  width: 15em;
}

结果是第三列它位于第二列右下方。我怎么能解决这个问题？最终结果应该是三列的布局，其中左右列是固定的，中心列是液体。非常感谢。

Answer 1

我喜欢将CSS表用于这些布局：

请注意，您不应在#属性中使用id。

#container {
  width: 100%;
  display: table;
}
#container>div {
  display: table-cell;
}
#col1 {
  background: lightblue;
  padding: 0.5em; 
  width: 15em;
}
#col2 {
  background: lightyellow;
  padding: 0.5em; 
}
#col3 {
  background: lightgreen;
  padding: 0.5em; 
  width: 15em;
}

<div id="container">
  <div id="col1"> left fixed 15em </div>
  <div id="col2"> center liquid </div>
  <div id="col3"> right fixed 15em </div>
</div>

Answer 2

这就是为flex框发明的：

#container {
  display: flex;
}
#col2 {
  flex: 1;
}
#col1,
#col3 {
  flex: 0 0 15em;
}

<did id="container">
  <div id="col1">left fixed 15em</div>
  <div id="col2">center liquid</div>
  <div id="col3">right fixed 15em</div>
</div>

额外信息：这是一个非常古老的网页布局问题（称为布局的“圣杯”），请参阅this article for a complete description。另请参阅Mozilla的Using Flexible Boxes。

注意：在id属性中不包含#（通过 id选择时使用的）

Answer 3

首先，你的HTML无效：

did应为div
id="..."不应包含#

HTML更新：

<div id="container">
   <div id="col1"> left fixed 15em </div>
   <div id="col2"> center liquid </div>
   <div id="col3"> right fixed 15em </div>
</div>

对于CSS，您可以将规则#col2 float: none更改为float: left

JSFIDDLE：http://jsfiddle.net/ghorg12110/5p175fms/

Answer 4

您可以尝试以下方法：

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Three column layout</title>
<style>
body { margin: 0; overflow: hidden }
#V { position: absolute; top: 1em; left: 1em; width: 15em; border: 1px solid red; padding: .5em }
#W { position: absolute; top: 1em; right: 1em; bottom: 0; left: 1em; margin: 0 17em }
#X { border: 1px solid blue; padding: .5em }
#Y { position: absolute; top: 1em; right: 1em; width: 15em; border: 1px solid green; padding: .5em }
</style>
<div id=V>
Left content
</div>
<div id=W>
<div id=X>
Middle content
</div>
</div>
<div id=Y>
Right content
</div>

三栏布局

4 个答案: