在文件中如何让两个宽度为50%的div在同一行显示并换行？（涉及IT技术）

Question

我想使用百分比来设置宽度，实现一个流式布局。以下是我的HTML代码：

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

问题是元素无法在同一行上显示。但是，如果我在 HTML 中删除它们之间的换行符，则布局可以正常工作:

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

以上第一个HTML有什么问题？我如何实现类似的效果，但是不使用绝对定位和浮动？

- Chris

---

只需在每个 DIV 中添加 box-sizing (CSS3)： box-sizing: border-box; - Zaur_M

Answer 1

问题在于，当某些内容是内联元素时，每个空格都被视为实际空格。这将影响元素的宽度。我建议使用float或display: inline-block。(只需不要在div之间留下任何空格)。

这里是一个演示：

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>

- meo

---

很酷，似乎可行。但是为什么这段代码不需要clear:both之后的内容呢？ - Chris

不支持IE7，请查看我的使用浮动的答案 :) - OptimusCrime

可爱但如果这些div有边框或填充它将无法工作。 - Rui Marques

@RuiMarques，你从未听说过box-sizing: border-box吧 :D - meo

为什么我使用Bootstrap时，第二个div会换行呢？ - Lai32290

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

- Ana

Answer 3

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

.div_wrapper{
    white-space: nowrap;
}

- Tihomir Mitkov

---

这使得子div在我的情况下出现在父div的右侧。 - martin36

Answer 4

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

- sandeep

---

你可以使用word-spacing：-1em;或letter-spacing：-1em;代替font-size：0; :) - sandeep

em hack 使得两个 div 的组合宽度小于 100%。 - Ashley

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) 弹性盒子布局 (FIDDLE)

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

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

作为参考，这篇CSS技巧文章似乎总结了实现此目的的各种方法。

- Danield

Answer 6

CSS 弹性盒子布局

现代简单解决方案。比 HTML 表格更好！

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

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

备选方案: CSS Grid布局

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

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

- qwr

Answer 7

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

我知道这个问题想要inline block，但是请尝试在IE 7（我工作的最老的浏览器）中查看http://jsfiddle.net/N9mzE/1/。div不会并排。

OP说他不想使用floats因为他不喜欢它们。好吧...在我看来，制作良好的网页，使其在任何浏览器中都不会看起来奇怪，应该是主要目标，而你可以通过使用floats来实现这一点。

老实说，我能看到问题。Floats非常棒。

- OptimusCrime

---

我个人不喜欢使用浮点数，认为inline-block是更加简洁的方式，而且不需要额外的标记。你还可以在IE中使用display:inline; zoom: 1;来实现。 - meo

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>

- S.831

---

内联块不会改变问题，问题在于空格，一旦某些东西是内联的，每个空格都很重要...这就是为什么你的注释技巧很好，但我不确定这在IE中是否有效 - meo

Answer 9

抱歉，但我在这里看到的所有答案都是hacky的或者如果你稍微强一点就会失败。

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

- Rui Marques

---

是的，但是使用表格进行布局也是如此，它们是用于数据结构的。 - CodingInTheUK

CSS网格布局和Flexbox替代使用表格。 - qwr

是的，伙计，为了辩护我必须说这个答案是来自2014年，而Grid布局在浏览器中直到2017年才可用，所以... ;) - Rui Marques

据说Flexbox是可用的，但可能不支持IE。 - qwr

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

- Wesley