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

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>

然后它工作正常.问题出在哪儿？我怎么能这样做,但没有使用绝对位置和浮动.

抱歉英语.我希望我能很好地解释我的问题

Answer 1

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

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

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

Answer 2

问题是如果你在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为此

Answer 3

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

.div_wrapper{
    white-space: nowrap;
}

Answer 4

给这个parentDIV 字体大小: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 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>

作为参考,这个CSS-tricks帖子似乎总结了实现这一目标的各种方法.