【问题标题】：CSS two div width 50% in one line with line break in file [duplicate]一行中的CSS两个div宽度为50％，文件中有换行符[重复]
【发布时间】：2012-05-28 17:50:51
【问题描述】：

我尝试使用百分比作为宽度来构建流畅的布局。这样做我试过这个：

<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>

在那种情况下，它们不会排成一行，但是如果我删除它们之间的换行符，就像这样：

    <div style="width:50%; display:inline-table;">A</div><div style="width:50%;   display:inline-table;">B</div>

然后它工作正常。问题出在哪里？我怎么能做这样的事情，但不使用绝对位置和浮动。

附言对不起英语。 p.s.s.我希望我能很好地解释我的问题

【问题讨论】：

只需将 box-sizing (CSS3) 添加到每个 DIV： box-sizing: border-box;

标签： css inline

【解决方案1】：

问题在于，当某些内容是内联的时，每个空格都被视为实际空格。所以它会影响元素的宽度。我推荐使用float 或display: inline-block。（只是不要在 div 之间留下任何空格）。

这是一个演示：

div {
  background: red;
}
div + div {
  background: green;
}

&lt;div style="width:50%; display:inline-block;"&gt;A&lt;/div&gt;&lt;div style="width:50%; display:inline-block;"&gt;B&lt;/div&gt;

【讨论】：

酷，似乎工作。但是为什么这段代码不需要明确：都在 ??
在 IE7 中不起作用，请查看我的答案，用浮动代替 :)
@OptimusCrime 他的问题非常明确。 “我怎么能做这样的事情，但不使用绝对位置和浮动。” +流畅的布局接缝在那里非常重要。
可爱，但如果这些 div 有边框或填充，它将不起作用。
@RuiMarques 你从来没有听说过box-sizing: border-box 吗：D

【解决方案2】：

基本上inline-table是用于元素表的，我想你这里真正需要的是inline-block，如果你无论如何都必须使用inline-table，试试这种方式：

<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>

【讨论】：

inline 块不会改变问题，它的空格，只要有东西是内联的，每个空格都很重要......这就是为什么你的评论技巧非常好，但我不确定是否这适用于 IE

【解决方案3】：

将宽度设置为 50% 时遇到的问题是子像素的舍入。如果您的容器宽度为 99 像素，则 50% 的宽度可能会导致 2 个容器，每个容器 50 像素。

使用 float 可能是最简单的，而且不是一个坏主意。有关如何解决问题的更多详细信息，请参阅this question。

如果您不想使用浮动，请尝试使用 49% 的宽度。据我所知，这将跨浏览器工作，但不是像素完美的..

html:

<div id="a">A</div>
<div id="b">B</div>

css:

#a, #b {
    width: 49%;
    display: inline-block; 
}
#a {background-color: red;}
#b {background-color: blue;}

【讨论】：

【解决方案4】：

问题是，如果在 HTML 中它们之间有一个新行，那么当你使用 inline-table 或 inline-block 时，它们之间会出现一个空格

50% + 50% + 那个空间 > 100% 这就是为什么第二个最终低于第一个

解决方案：

<div></div><div></div>

或

<div>
</div><div>
</div>

或

<div></div><!--
--><div></div>

我们的想法是在 HTML 中的第一个结束 div 标记和第二个开始 div 标记之间不要有任何空格。

PS - 我也会使用 inline-block 而不是 inline-table

【讨论】：

最后几个小时我的头靠在墙上。谢谢......解决方案3就是它，现在你写了它我在示例代码中也看到了它。有没有关于这个小情况的文章？
为什么我发现自己每隔几个月就会再次需要这个答案......哦，对，因为它是这样工作的，这是无知的！
太棒了。谢谢！

【解决方案5】：

<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>

我知道这个问题需要内联块，但尝试在 IE 7 中查看 http://jsfiddle.net/N9mzE/1/（我工作的地方支持的最古老的浏览器）。 div 不是并排的。

OP 说他不想使用浮点数，因为他不喜欢它们。嗯...在我看来，制作在任何浏览器中看起来都不奇怪的好网页应该是主要目标，而您可以通过使用浮动来做到这一点。

老实说，我能看出问题所在。花车很棒。

【讨论】：

我个人讨厌浮动，并认为 inline-block 是一种更简洁的方式。没有额外的标记。你可以让它在 IE 中工作：display:inline; zoom: 1; et voilà

【解决方案6】：

给这个parent DIV 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>

【讨论】：

为此你可以使用 word-spacing:-1em;或字母间距：-1em；而不是字体大小：0； :)
em hack 使 2 个 div 的组合宽度

【解决方案7】：

抱歉，我在这里看到的所有答案要么是老生常谈，要么如果你打喷嚏用力一点就会失败。

如果您使用表格，您可以（如果您愿意）在 div 之间添加空格、设置边框、填充...

<table width="100%" cellspacing="0">
    <tr>
        <td style="width:50%;">A</td>
        <td style="width:50%;">B</td>            
    </tr>
</table>

在此处查看更完整的示例：http://jsfiddle.net/qPduw/5/

【讨论】：

没错，但使用表格进行布局也是如此，它们是用于数据结构的。
使用表格替换 CSS 网格和弹性框
是的，伙计，在我看来，这个答案来自 2014 年，而 Grid 仅在 2017 年的浏览器中可用，所以... ;)
据说 flexbox 可用，但可能不支持 IE

【解决方案8】：

使用以下 CSS 将它们包裹在一个 div 周围

.div_wrapper{
    white-space: nowrap;
}

【讨论】：

优秀。最干净的结果。
这使得子 div 对我来说出现在父 div 的右侧。

【解决方案9】：

我怎么能做这样的事情，但不使用绝对位置和浮动？

除了使用inline-block 方法（如其他答案中所述）之外，还有其他一些方法：

1) CSS 表格 (FIDDLE)

.container {
  display: table;
  width: 100%;
}
.container div {
  display: table-cell;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

2) 弹性盒 (FIDDLE)

.container {
  display: flex;
}
.container div {
  flex: 1;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

作为参考，this CSS-tricks post 似乎总结了实现这一目标的各种方法。

【讨论】：

在我看来，最好的 2 个选项。竖起大拇指！

【解决方案10】：

CSS Flexboxes

简单的现代解决方案。 Better than HTML tables!

.container {
  display: flex;
}
.container div {
  flex: auto; /* also 1 or 50% */
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

替代方案：CSS Grids

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* also 50% */
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

【讨论】：