一行中的 CSS 两个 div 宽度为 50%，并在文件中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10698636/
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
CSS two div width 50% in one line with line break in file
提问by Chris
I try to build fluid layout using percentages as widths. Do do so i tried this:
我尝试使用百分比作为宽度来构建流体布局。这样做我试过这个：
<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>
In that case they wont stand in one line, but if i remove line break between them, like this:
在这种情况下，它们不会排成一行，但是如果我删除它们之间的换行符，如下所示：
<div style="width:50%; display:inline-table;">A</div><div style="width:50%; display:inline-table;">B</div>
then it works fine. Where is the problem? How can i do someting like that but without using absolute position and float.
然后它工作正常。问题出在哪儿？我怎么能做这样的事情，但不使用绝对位置和浮动。
p.s. sorry for english. p.s.s. i hope i good explain my problem
ps对不起英语。pss我希望我能很好地解释我的问题
回答by meo
The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using floator display: inline-block. (Just don't leave any whitespace between the divs).
问题在于，当某些内容是内联的时，每个空格都被视为一个实际的空间。所以它会影响元素的宽度。我建议使用float或display: inline-block。（只是不要在 div 之间留下任何空格）。
Here is a demo:
这是一个演示：
div {
background: red;
}
div + div {
background: green;
}<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>回答by Ana
The problem is that if you have a new line between them in the HTML, then you get a space between them when you use inline-tableor inline-block
问题是，如果您在 HTML 中的它们之间有一个新行，那么当您使用inline-table或inline-block
50% + 50% + that space > 100% and that's why the second one ends up below the first one
50% + 50% + 那个空间 > 100% 这就是为什么第二个最终低于第一个
Solutions:
解决方案：
<div></div><div></div>
or
或者
<div>
</div><div>
</div>
or
或者
<div></div><!--
--><div></div>
The idea is not to have any kind of space between the first closing div tag and the second opening div tag in your HTML.
这个想法是在 HTML 中的第一个结束 div 标签和第二个开始 div 标签之间没有任何类型的空间。
PS - I would also use inline-blockinstead of inline-tablefor this
PS - 我也会使用inline-block而不是inline-table为此
回答by Tihomir Mitkov
Wrap them around a div with the following CSS
使用以下 CSS 将它们包裹在 div 中
.div_wrapper{
white-space: nowrap;
}
回答by sandeep
Give this parentDIV font-size:0. Write like this:
给这个parentDIV font-size:0。像这样写：
<div style="font-size:0">
<div style="width:50%; display:inline-table;font-size:15px">A</div>
<div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>
回答by Danield
How can i do something like that but without using absolute position and float?
我怎么能做这样的事情，但不使用绝对位置和浮动？
Apart from using the inline-blockapproach (as mentioned in other answers) here are some other approaches:
除了使用该inline-block方法（如其他答案中所述）之外，还有一些其他方法：
1) CSS tables (FIDDLE)
1) CSS 表 ( FIDDLE)
.container {
display: table;
width: 100%;
}
.container div {
display: table-cell;
}<div class="container">
<div>A</div>
<div>B</div>
</div>2) Flexbox (FIDDLE)
2) 弹性盒 (小提琴)
.container {
display: flex;
}
.container div {
flex: 1;
}<div class="container">
<div>A</div>
<div>B</div>
</div>For a reference, this CSS-tricks postseems to sum up the various approaches to acheive this.
作为参考，这篇 CSS-tricks 文章似乎总结了实现这一目标的各种方法。
回答by OptimusCrime
<div id="wrapper" style="width: 400px">
<div id="left" style="float: left; width: 200px;">Left</div>
<div id="right" style="float: right; width: 200px;">Left</div>
<div style="clear: both;"></div>
</div>
I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/in IE 7 (the oldest browser supported where I work). The divs are not side by side.
我知道这个问题需要内联块，但尝试在 IE 7（我工作的地方支持的最古老的浏览器）中查看http://jsfiddle.net/N9mzE/1/。div 不是并排的。
OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.
OP 说他不想使用花车，因为他不喜欢它们。嗯...在我看来，制作在任何浏览器中看起来都不奇怪的好网页应该是主要目标，而您可以通过使用浮动来实现这一点。
Honestly, I can see the problem. Floats are fantastic.
老实说，我能看出问题所在。花车很棒。
回答by S.831
basically inline-tableis for element table, I guess what you really need here is inline-block, if you have to use inline-tableanyway, try it this way:
基本上inline-table是用于元素表，我想你在这里真正需要的是inline-block，如果你必须使用inline-table，请尝试这种方式：
<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
回答by Rui Marques
Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.
抱歉，我在这里看到的所有答案要么是笨拙的，要么是失败的，如果你打喷嚏再用力一点。
If you use a table you can (if you wish) add a space between the divs, set borders, padding...
如果您使用表格，您可以（如果您愿意）在 div 之间添加一个空格、设置边框、填充...
<table width="100%" cellspacing="0">
<tr>
<td style="width:50%;">A</td>
<td style="width:50%;">B</td>
</tr>
</table>
Check a more complete example here: http://jsfiddle.net/qPduw/5/
在此处查看更完整的示例：http: //jsfiddle.net/qPduw/5/
回答by Wesley
The problem you run into when setting width to 50% is the rounding of subpixels. If the width of your container is i.e. 99 pixels, a width of 50% can result in 2 containers of 50 pixels each.
将宽度设置为 50% 时遇到的问题是子像素的舍入。如果容器的宽度为 99 像素，则 50% 的宽度会导致 2 个容器，每个容器为 50 像素。
Using float is probably easiest, and not such a bad idea. See thisquestion for more details on how to fix the problem then.
使用 float 可能是最简单的，而且不是一个坏主意。有关如何解决问题的更多详细信息，请参阅此问题。
If you don't want to use float, try using a width of 49%. This will work cross-browser as far as I know, but is not pixel-perfect..
如果您不想使用浮动，请尝试使用 49% 的宽度。据我所知，这将跨浏览器工作，但不是像素完美的..
html:
html：
<div id="a">A</div>
<div id="b">B</div>
css:
css：
#a, #b {
width: 49%;
display: inline-block;
}
#a {background-color: red;}
#b {background-color: blue;}
