CSS 在两个 div 之间拆分可用宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18440658/
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
Split available width between two divs
提问by Grodriguez
I have a container (width is not known) containing four divs, as follows:
我有一个包含四个 div 的容器（宽度未知），如下所示：
| Div1 | Div2 ............... | .............. Div3 | Div4 |
The leftmost and rightmost divs (Div1/Div4) are fixed width; that's the easy part.
最左边和最右边的div（Div1/Div4）是固定宽度的；这是最简单的部分。
The width of Div2/Div3 is not known, and I would like to avoid setting a fixed width for them, as depending on the content one can be much wider than the other (so I cannot just e.g. have each one use 50% of the available space)
Div2/Div3 的宽度未知，我想避免为它们设置固定宽度，因为根据内容，一个可能比另一个宽得多（所以我不能只是让每个人使用 50%可用空间）
I would like the width of Div2/Div3 to be automatically computed by the browser, then if there is any remaining space left, they should stretch to fill any remaining space (it does not matter how the remaining space is split between Div2/Div3)
我希望浏览器自动计算 Div2/Div3 的宽度，然后如果有剩余空间，它们应该伸展以填充任何剩余空间（剩余空间如何在 Div2/Div3 之间分割并不重要）
The way I am approaching this right now is:
我现在处理这个问题的方式是：
- Div1 floated left (or absolutely positioned)
- Div4 floated right (or absolutely positioned)
- Div2 has a margin-left equal to the width of Div1 (known)
- Div3 has a margin-right equal to the width of Div4 (known)
- Div1 向左浮动（或绝对定位）
- Div4 向右浮动（或绝对定位）
- Div2 的边距等于 Div1 的宽度（已知）
- Div3 的边距等于 Div4 的宽度（已知）
My question is, how to have Div2 and Div3 stretch to fill the remaining available width? I guess one option would be to use display: table, and another possibility would be flex-box. Are there any alternatives?
我的问题是，如何让 Div2 和 Div3 拉伸以填充剩余的可用宽度？我想一种选择是使用 display: table，另一种可能性是flex-box。有没有其他选择？
Update:Edited for clarity.
更新：为清楚起见进行了编辑。
Update 2:Please note that I cannot assume that Div2 and Div3 should each get 50% of the available space. This is explicitly stated in the question but somehow I keep getting answers based on this assumption.
更新 2：请注意，我不能假设 Div2 和 Div3 应该各自获得 50% 的可用空间。这在问题中明确说明，但不知何故，我不断根据这个假设得到答案。
采纳答案by Danield
Make use of overflow:hidden(or overflow:auto - as long as overflow isn't set to visible [the default]) to trigger block formatting contextsto fill remaining width
利用overflow:hidden（或溢出：自动 - 只要溢出未设置为可见[默认]）触发block formatting contexts以填充剩余宽度
(I have assumed a fixed width of 100px for div1 and div4)
（我假设 div1 和 div4 的固定宽度为 100px）
Markup
标记
<div class="div1">DIV 1</div>
<div class="container">
<div class="div2">DIV 2</div>
<div class="div3">DIV 3</div>
</div>
<div class="div4">DIV 4</div>
CSS
CSS
html,body,div
{
height: 100%;
}
.div1 {
float:left;
width: 100px;
background: aqua;
}
.container
{
overflow: hidden;
padding-right: 100px;
box-sizing: border-box;
background: green;
}
.div2 {
background:yellow;
float:left;
}
.div3 {
background:brown;
overflow: hidden;
}
.div4 {
position: absolute;
right:0;
top:0;
background:pink;
width: 100px;
}
回答by rafaelcastrocouto
I came up with 3 different solutions to get the proper width:
我想出了 3 种不同的解决方案来获得合适的宽度：
Table cells:
parent: {display: table} childs: {display: table-cell}Flex grid:
parent: {display: inline-flex} childs: {flex-grow: 1}Box-sizing container:
parent: {float: left} container: {box-sizing: border-box; padding: 0 WIDTH} childs: {width: 50%}
表格单元格：
parent: {display: table} childs: {display: table-cell}弹性网格：
parent: {display: inline-flex} childs: {flex-grow: 1}盒装容器：
parent: {float: left} container: {box-sizing: border-box; padding: 0 WIDTH} childs: {width: 50%}
The last solution uses extra html markup and aligns elements vertically using relative positioning (means you must have fixed heights).
最后一个解决方案使用额外的 html 标记并使用相对定位垂直对齐元素（意味着您必须具有固定的高度）。
I suggest you use the first solution, since it's more compatible with older browsers, it's simple to implement and works just fine.
我建议您使用第一种解决方案，因为它与旧浏览器更兼容，因此实现起来很简单，而且效果很好。
回答by fred02138
Here's a solution using display:table without actually using table,tr,td, etc: (FIDDLE)
这是使用 display:table 而不实际使用 table、tr、td 等的解决方案：（FIDDLE）
HTML
HTML
<div id="foo">
<div id="left"></div>
<div id="center1">asdfasdfasdf</div>
<div id="center2"> asdfasdlfkjasl;dkfjalsdjkf</div>
<div id="right"></div>
</div>
CSS
CSS
div {
border: solid 1px black ;
height: 20px;
}
#foo {
border: none;
display: table;
width: 100%;
}
#left, #right {width: 100px;}
#foo > div {
display: table-cell;
}
回答by Mohsenme
You can wrap the Div2 and the Div3 inside a parent Div, and set the width of the Div2 and the Div3 to 50%.
您可以将 Div2 和 Div3 包裹在父 Div 中，并将 Div2 和 Div3 的宽度设置为 50%。
<div id="div1"> </div>
<div style="margin-left:*div1width*;margin-right:*div4width*;">
<div id="div2" style="width:50%"> </div>
<div id="div3" style="width:50%"> </div>
</div>
<div id="div4"> </div>
回答by coma
The calc (http://caniuse.com/#search=calc) way:
calc ( http://caniuse.com/#search=calc) 方式：
#foo {
position: relative;
background-color: #ccc;
}
#foo:after {
content: "";
clear: both;
}
#foo > div {
width: calc(50% - 100px);
height: 100px;
float: left;
}
#foo > div:nth-child(1) {
width: 100px;
background-color: #f00;
}
#foo > div:nth-child(2) {
background-color: #0f0;
}
#foo > div:nth-child(3) {
background-color: #00f;
}
#foo > div:nth-child(4) {
width: 100px;
background-color: #000;
}
http://jsfiddle.net/coma/YPWcW/
http://jsfiddle.net/coma/YPWcW/
The padding/position way:
填充/定位方式：
#foo {
padding: 0 100px;
position: relative;
background-color: #ccc;
}
#foo:after {
content: "";
clear: both;
}
#foo > div {
width: 50%;
height: 100px;
float: left;
}
#foo > div:nth-child(1) {
width: 100px;
background-color: #f00;
float: none;
position: absolute;
top: 0;
left: 0;
}
#foo > div:nth-child(2) {
background-color: #0f0;
}
#foo > div:nth-child(3) {
background-color: #00f;
}
#foo > div:nth-child(4) {
width: 100px;
background-color: #000;
float: none;
position: absolute;
top: 0;
right: 0;
}
http://jsfiddle.net/coma/qqR4Z/
http://jsfiddle.net/coma/qqR4Z/
You can use min-width:
您可以使用最小宽度：
回答by user2594152
i think it is possible using flex box model in css3
我认为可以在 css3 中使用 flex box 模型
The following code works in IE10,chrome,firefox,safari
以下代码适用于 IE10、chrome、firefox、safari
<div class="mainbox">
<div class="marpad marpadout">
div1
</div>
<div class="subbox marpad">
div2
</div>
<div class="subbox marpad">
div3
</div>
<div class="marpad marpadout">
div4
</div>
</div>
The styles are:
样式是：
.mainbox{
width:100%;
display:-moz-box;
display:-webkit-box;
display:-ms-flexbox;
display:box;
background:#ff0000;
}
.subbox{
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-flex:1;
box-flex:1;
}
.marpad{
margin:5px;
padding: 0 10px 10px 0;
background:#ccc;
}
.marpadout{
width:100px;
}
回答by Wallace Sidhrée
My solution borrows on others that were already posted, but by testing them, I found that the content within the two central divs messed up with the distribution of width... They would retain the same width as long as they had exactly the same content, but would be unevenly wide as soon as one got more content.
我的解决方案借鉴了已经发布的其他人，但通过测试它们，我发现两个中央 div中的内容与宽度分布混乱......只要它们具有完全相同的内容，它们就会保持相同的宽度，但一旦获得更多内容，宽度就会不均匀。
So in my solution I used jQuery to distribute the remnant width to the two central divs, making their width even regardless of differences on their content.
因此，在我的解决方案中，我使用 jQuery 将剩余宽度分配到两个中央 div，即使它们的宽度有差异，也不管它们的内容。
Bonus #1:jQuery doesn't need to know the width of the left and right divs explicitly, as it fetches whatever width has been defined through CSS.
Bonus #1:jQuery 不需要明确知道左右 div 的宽度，因为它获取通过 CSS 定义的任何宽度。
Bonus #2:Easily specify how many center divs are there and share the remaining width equally among all of them. Just change the number the remaining width is divided by.
Bonus #2:轻松指定有多少个中心 div，并在所有这些 div 之间平均共享剩余的宽度。只需更改剩余宽度除以的数字即可。
Here is a fiddle. Below is the solution as posted in the fiddle, simplified. The fiddle shows, in greater detail, the flaws of other solutions when content comes into the central divs.
这是一个小提琴。以下是在小提琴中发布的简化解决方案。当内容进入中央 div 时，小提琴更详细地显示了其他解决方案的缺陷。
<style>
div { margin: 5px; padding: 5px; }
.js-container { border: 1px solid red; display: table; }
.with-width { width: 80%; }
.js-child { border: 1px solid gray; display: table-cell; }
.left,
.right { width: 100px; }
</style>
<h3>Using javascript to dynamically distribute the remaining width</h3>
<div class="js-container with-width">
<div class="js-child left">left</div>
<div class="js-child center">center</div>
<div class="js-child center">center</div>
<div class="js-child right">right</div>
</div>
<div class="js-container with-width">
<div class="js-child left">left</div>
<div class="js-child center">center left <em>doesn't get wider</em> because of extra content</div>
<div class="js-child center">center right</div>
<div class="js-child right">right</div>
</div>
<script>
$(document).ready(function() {
function containerWidth() {
var w = parseInt($('.js-container').outerWidth(), 10);
return w;
}
// console.log('containerWidth: ' + containerWidth());
function outerChildrenWidth() {
var wl = parseInt($('.js-container').find('.left').outerWidth(), 10);
var wr = parseInt($('.js-container').find('.right').outerWidth(), 10);
return wl + wr; // bonus #1
}
// console.log('outerChildrenWidth: ' + outerChildrenWidth());
function centerChildWidth() {
var w = (containerWidth() - outerChildrenWidth()) / 2; // bonus #2
return w;
}
// console.log('centerChildWidth: ' + centerChildWidth());
function setCenterChildWidth() {
$('.js-container').find('.center').css('width', centerChildWidth() + 'px');
}
setCenterChildWidth();
});
</script>
Note that the js-prefix on some classes is there because I used it to separate the javascript-influenced markup from the "normal" one. I've also kept console logs in case you'd like to debug.
请注意，js-某些类的前缀在那里是因为我用它来将受 javascript 影响的标记与“正常”标记分开。我还保留了控制台日志，以防您想调试。
回答by JA9
IF you know the width of DIV1 and DIV4 then try to find the width of other two div in %.try to give width in % to DIV2 and DIV3.IT will work.
如果您知道 DIV1 和 DIV4 的宽度，则尝试在 % 中找到其他两个 div 的宽度。尝试将 % 中的宽度提供给 DIV2 和 DIV3.IT 将起作用。
