首页 文章

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

提问于
浏览 次
156

是否可以使用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 （不是百分比宽度）的左列，以及一个扩展为在行上填充 THE REMAINING SPACE 的右列 . 听起来很简单吧？此外，由于没有什么是"floated"，父容器的高度适当地扩展到包含内容的高度 .

--BEGIN RANT--
我很复杂 . 它们反转元素的顺序，它们使用百分比宽度，或者它们使用浮点数，负边距，并且"left"，"right"和"margin"属性之间的关系很复杂 . 此外，布局是亚像素敏感的，因此即使添加单个像素的边框，填充或边距也会破坏整个布局，并将整个列包裹到下一行 . 例如，即使你尝试做一些简单的事情，例如将4个元素放在一行上，每个宽度设置为25％，舍入错误也是一个问题 .
--END RANT--

我've tried using 144732 and 144733 , but the problem is I just can' t得到第二个元素来填充线上的 remaining 空间 . 在某些情况下，将宽度设置为"width:100%-(LeftColumWidth)px"会起作用，但实际上不支持在width属性中执行计算 .

css layout fixed-width

6 回答

  • 0

    兼容常见的现代浏览器（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>
    回复于
  • 162

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

    回复于
  • 45

    See: 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?

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

    回复于
  • 39

    如果你不能使用 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/

    回复于
  • 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: Floating an image to the left of the text）

    回复于
  • 2

    您可以在流体元素上使用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/

    回复于

相关问题