Question

有问题。我有这个代码。

<div class="main">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

我需要制作两个列。 “侧边栏”的固定宽度必须为200px; 并将所有剩余宽度“内容”全屏显示。

我无法改变html代码的结构，只是css。

Answer 1

使用float：left表示.sidebar，左边距表示.content：

.sidebar {float: left; width: 200px; background: red;}
.content {background: green; margin: 0 0 0 200px;}

http://jsfiddle.net/orty5qtj/1/

另一种选择是使用calc，这在IE8中是不受支持的。上述解决方案适用于所有浏览器。

Answer 2

试试这个：

.sidebar {
  float: left;
  min-height: 50px;
  background: red;
  width: 200px;
 }

.content {
  background : yellow;
  margin-left: 200px;
  min-height: 50px;
}

https://jsfiddle.net/Saiyam/5krmkkkx/3/

Answer 3

如果绝对位置没问题，你可以用它来说left:200px; right:0并获得你需要的所有空间

小提琴：http://jsfiddle.net/h2udmqhn/

＆＃13;

.main {
  position: relative;
  height: 300px;
  width: 300px;
  border: 1px solid black;
}
.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: red;
}
.content {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  height: 200px;
  background: blue;
}

＆＃13;

<div class="main">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>

＆＃13;

Answer 4

有几种简单的方法可以在不需要计算，边距或绝对定位的情况下完成此操作。以下两种方法都有额外的好处，即保持列彼此相同的高度

使用显示表（与ie8兼容）

.main {
  display: table;
  width: 100%;
}
.main > div {
  display: table-cell;
}
.sidebar {
  width: 200px;
  background: blue;
}
.content {
  background: red;
}

<div class="main">
  <div class="sidebar">200px</div>
  <div class="content">the rest</div>
</div>

使用flex（仅适用于较新的浏览器，除非与浏览器前缀一起使用）：

.main {
    display: flex;
    width:100%;
    max-width:100%;
}
.sidebar {
    width: 200px;
    flex: 0 0 200px;
    background-color:blue;
}
.content {
    background-color:red;
    flex: 1 0 auto;
}

<div class="main">
    <div class="sidebar">200px</div>
    <div class="content">the rest</div>
</div>

第一个div固定，第二个全宽。无法改变html的结构

4 个答案: