Question

是否有可能使用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>

它会生成一个左列，其中 FIXED WIDTH （不是百分比宽度），右侧列会扩展以填充该行上的剩余空间。听起来很简单吧？此外，由于没有任何“浮动”，父容器的高度适当地扩展到包含内容的高度。

- BEGIN RANT -
我已经看到了具有固定宽度侧柱的多列布局的“清晰修复”和“圣杯”实现，它们很糟糕并且它们很复杂。它们反转元素的顺序，它们使用百分比宽度，或者它们使用浮点数，负边距，并且“左”，“右”和“边距”属性之间的关系是复杂的。此外，布局是亚像素敏感的，因此即使添加单个边框，填充或边距像素也会破坏整个布局，并将整个列包装发送到下一行。例如，即使你试图做一些简单的事情，例如将4个元素放在一条线上，每个宽度设置为25％，舍入误差也是一个问题。
- END RANT -

我尝试使用“inline-block”和“white-space：nowrap;”，但问题是我无法获得第二个元素来填充剩余空间线。将宽度设置为“width：100％ - （LeftColumWidth）px”在某些情况下会起作用，但实际上不支持在width属性中执行计算。

Answer 1

请参阅： 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>

Why did I replace margin-left: 100px with overflow: hidden on .right?

编辑：这是上面（死）链接的两个镜像：

Answer 2

使用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/

Answer 3

与常见的现代浏览器（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>

Answer 4

您可以在流体元素上使用calc（100％-100px），同时对两个元素使用display：inline-block。

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

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


<div class=“left”></div><div class=“right”></div>

简单示例：http://jsfiddle.net/dw689mt4/1/

Answer 5

我已经使用flex-grow属性来实现此目标。您必须为父容器设置display: flex，然后为要填充剩余空间的块设置flex-grow: 1，或者仅将flex: 1设置为tanius评论。

Answer 6

如果您无法使用overflow: hidden（因为您不想overflow: hidden）或者您不喜欢CSS黑客攻击/解决方法，那么您可以使用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/

Answer 7

当你放弃内联块

时

.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: Floating an image to the left of the text）

如何使内联块元素填充该行的其余部分？

7 个答案: