Question

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

<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。对不起英语。 p.s.s.我希望我能很好地解释我的问题

Answer 1

问题在于，当某些东西是内联的时，每个whitepsace都是一个真实的空间。所以它会影响元素的宽度。我建议使用float或display：inline-block。（只是不要在div之间留下任何空格）。

演示：http://jsfiddle.net/N9mzE/1/

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

Answer 2

问题在于，如果您在HTML中有新行，那么当您使用inline-table或inline-block

时，它们之间会有空格

50％+ 50％+该空间＆gt; 100％，这就是为什么第二个最终低于第一个

的原因

解决方案：

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

或

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

或

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

我们的想法是在HTML中第一个结束div标签和第二个div标签之间没有任何空格。

PS - 我也会使用inline-block代替inline-table来实现此目标

Answer 3

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

Answer 4

使用以下CSS

将它们包裹在div周围

.div_wrapper{
    white-space: nowrap;
}

Answer 5

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

除了使用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）Flexbox（FIDDLE）

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

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

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

Answer 6

<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说他不想使用花车，因为他不喜欢它们。嗯...在我看来，在任何浏览器中创建看起来并不奇怪的好网页应该是maingoal，你可以通过使用浮动来实现。

老实说，我可以看到问题所在。花车太棒了。

Answer 7

使用 new(ish) CSS Grids 的简单解决方案（比 HTML 表格更好！）：

.container {
  display: grid;
  grid-template-columns: 50% 50%;
}

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

Answer 8

基本上inline-table用于元素表，我猜你真正需要的是inline-block，如果你必须使用inline-table，请尝试这样：

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

Answer 9

很抱歉，但如果你打得更厉害，我在这里看到的所有答案都是黑客或失败。

如果您使用表格，您可以（如果您愿意）在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/

Answer 10

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

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

如果您不想使用float，请尝试使用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;}

CSS两个div宽度50％在一行中，文件中有换行符

10 个答案:

1）CSS表格（FIDDLE）

2）Flexbox（FIDDLE）