200

使用 CSS 和两个内联块（或其他）DIV 标签而不是使用表格是否可以做到这一点？

表格版本是这样的（添加了边框以便您可以看到它）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>

它产生一个具有固定宽度（不是百分比宽度）的左列，以及一个扩展以填充行上剩余空间的右列。听起来很简单，对吧？此外，由于没有“浮动”，因此父容器的高度会适当地扩展以包含内容的高度。

--BEGIN RANT--
我已经看到了具有固定宽度侧列的多列布局的“明确修复”和“圣杯”实现，它们很糟糕而且很复杂。它们颠倒了元素的顺序，它们使用百分比宽度，或者它们使用浮点数、负边距，并且“left”、“right”和“margin”属性之间的关系很复杂。此外，布局是亚像素敏感的，因此即使添加单个像素的边框、填充或边距也会破坏整个布局，并将整个列发送到下一行。例如，即使您尝试做一些简单的事情，例如将 4 个元素放在一条线上，每个元素的宽度设置为 25%，舍入误差也是一个问题。
--结束咆哮--

我试过使用“inline-block”和“white-space:nowrap;”，但问题是我无法让第二个元素填充行上的剩余空间。在某些情况下，将宽度设置为“width:100%-(LeftColumWidth)px”会起作用，但实际上并不支持在宽度属性中执行计算。

4

7 回答 7

175

见：http: //jsfiddle.net/qx32C/36/

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 20px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.right {
    overflow: hidden;
    background: #ccc
}
<div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

为什么我margin-left: 100px用overflow: hiddenon替换.right？

于 2011-04-07T20:57:53.737 回答
70

使用 flexbox 的现代解决方案：

.container {
    display: flex;
}
.container > div {
    border: 1px solid black;
    height: 10px;
}

.left {
   width: 100px;
}

.right {
    width: 100%;
    background-color:#ddd;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/m5Xz2/100/

于 2015-05-29T10:12:34.673 回答
48

兼容常见的现代浏览器（IE 8+）：http: //jsfiddle.net/m5Xz2/3/

.lineContainer {
    display:table;
    border-collapse:collapse;
    width:100%;
}
.lineContainer div {
    display:table-cell;
    border:1px solid black;
    height:10px;
}
.left {
    width:100px;
}
 <div class="lineContainer">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

于 2013-11-26T16:23:01.100 回答
7

您可以在流体元素上使用 calc (100% - 100px)，同时对两个元素使用 display:inline-block。

请注意，标签之间不应有任何空格，否则您也必须在计算中考虑该空格。

.left{
    display:inline-block;
    width:100px;
}
.right{
    display:inline-block;
    width:calc(100% - 100px);
}


<div class=“left”&gt;</div><div class=“right”&gt;</div>

快速示例：http: //jsfiddle.net/dw689mt4/1/

于 2018-08-10T12:32:17.470 回答
3

我已经使用flex-grow财产来实现这个目标。您必须display: flex为父容器设置，然后您需要为flex-grow: 1要填充剩余空间的块设置，或者就像flex: 1评论中提到的tanius一样。

于 2019-05-26T18:40:54.353 回答
0

如果你不能使用overflow: hidden（因为你不想要overflow: hidden）或者你不喜欢 CSS hacks/workarounds，你可以使用 JavaScript。请注意，它可能无法正常工作，因为它是 JavaScript。

var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
  right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}
.lineContainer {
  width: 100% border: 1px solid #000;
  font-size: 0px;
  /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}

.lineContainer div {
  height: 10px;
  display: inline-block;
}

.left {
  width: 100px;
  background: red
}

.right {
  background: blue
}
<div class="lineContainer">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/ys2eogxm/

于 2014-09-26T19:15:27.730 回答
0

当你放弃内联块时

.post-container {
    border: 5px solid #333;
    overflow:auto;
}
.post-thumb {
    float: left;
    display:block;
    background:#ccc;
    width:200px;
    height:200px;
}
.post-content{
    display:block;
    overflow:hidden;
}

http://jsfiddle.net/RXrvZ/3731/

（来自CSS Float：将图像浮动到文本的左侧）

于 2018-02-28T11:53:09.647 回答