CSS 如何使行内块元素填充行的其余部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5540485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an inline-block element fill the remainder of the line?
提问by Triynko
Is such a thing possible using CSS and two inline-block (or whatever) DIV tags instead of using a table?
使用 CSS 和两个内联块（或其他）DIV 标签而不是使用表格可以实现这样的事情吗？
The table version is this (borders added so you can see it):
表格版本是这样的（添加了边框以便您可以看到它）：
<!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>
It produces a left column with a FIXED WIDTH(not a percentage width), and a right column that expands to fill THE REMAINING SPACEon the line. Sounds pretty simple, right? Furthermore, since nothing is "floated", the parent container's height properly expands to encompass the height of the content.
它生成一个具有固定宽度（不是百分比宽度）的左列，以及一个扩展以填充线上剩余空间的右列。听起来很简单，对吧？此外，由于没有什么是“浮动的”，因此父容器的高度会适当扩展以包含内容的高度。
--BEGIN RANT--
I've seen the "clear fix" and "holy grail" implementations for multi-column layouts with fixed-width side column, and they suck and they're complicated. They reverse the order of elements, they use percentage widths, or they use floats, negative margins, and the relationship between the "left", "right", and "margin" attributes are complex. Furthermore, the layouts are sub-pixel sensitive so that adding even a single pixel of borders, padding, or margins will break the whole layout, and send entire columns wrapping to the next line. For example, rounding errors are a problem even if you try to do something simple, like put 4 elements on a line, with each one's width set to 25%.
--END RANT--
--开始咆哮--
我已经看到了带有固定宽度侧栏的多栏布局的“明确修复”和“圣杯”实现，它们很糟糕而且很复杂。它们颠倒元素的顺序，它们使用百分比宽度，或者它们使用浮点数、负边距，并且“左”、“右”和“边距”属性之间的关系很复杂。此外，布局是亚像素敏感的，因此即使添加边框、填充或边距的单个像素也会破坏整个布局，并将整列发送到下一行。例如，即使您尝试做一些简单的事情，例如将 4 个元素放在一行中，每个元素的宽度设置为 25%，舍入错误也是一个问题。
--结束咆哮--
I've tried using "inline-block" and "white-space:nowrap;", but the problem is I just can't get the 2nd element to fill the remainingspace on the line. Setting the width to something like "width:100%-(LeftColumWidth)px" will work in some cases, but performing a calculation in a width property is not really supported.
我试过使用“inline-block”和“white-space:nowrap;”，但问题是我无法让第二个元素填充行上的剩余空间。将宽度设置为“width:100%-(LeftColumWidth)px”之类的内容在某些情况下会起作用，但并不真正支持在 width 属性中执行计算。
回答by thirtydot
See:http://jsfiddle.net/qx32C/36/
见：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: 100pxwith overflow: hiddenon .right?
EDIT: Here are two mirrors for the above (dead) link:
为什么我margin-left: 100px用overflow: hiddenon替换.right？
编辑：以下是上述（死）链接的两个镜像：
回答by Panu Horsmalahti
A modern solution using flexbox:
使用 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>回答by Frosty Z
Compatible with common modern browers (IE 8+): http://jsfiddle.net/m5Xz2/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>回答by SuperIRis
You can use calc (100% - 100px) on the fluid element, along with display:inline-block for both elements.
您可以在流体元素上使用 calc (100% - 100px)，同时对两个元素使用 display:inline-block。
Be aware that there should not be any space between the tags, otherwise you will have to consider that space in your calc too.
请注意，标签之间不应有任何空格，否则您也必须在计算中考虑该空格。
.left{
display:inline-block;
width:100px;
}
.right{
display:inline-block;
width:calc(100% - 100px);
}
<div class=“left”></div><div class=“right”></div>
Quick example: http://jsfiddle.net/dw689mt4/1/
回答by Vladislav Kovechenkov
I've used flex-growproperty to achieve this goal. You'll have to set display: flexfor parent container, then you need to set flex-grow: 1for the block you want to fill remaining space, or just flex: 1as taniusmentioned in the comments.
我已经使用flex-grow财产来实现这一目标。你必须设置display: flex为父容器，那么你需要设置flex-grow: 1你要填写剩余空间，或者仅仅是块flex: 1作为tanius在评论中提到。
回答by Fanky
When you give up the inline blocks
当你放弃内联块时
.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/
http://jsfiddle.net/RXrvZ/3731/
回答by Nick Manning
If you can't use overflow: hidden(because you don't want overflow: hidden) or if you dislike CSS hacks/workarounds, you could use JavaScript instead. Note that it may not work as well because it's JavaScript.
如果你不能使用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>