60

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

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

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

ps对不起英语。pss 我希望我能很好地解释我的问题

4

10 回答 10

84

问题是当某些东西是内联的时，每个空格都被视为一个实际的空间。所以它会影响元素的宽度。我建议使用floator 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>

于 2012-05-22T08:55:02.400 回答
33

问题是，如果在 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

于 2012-05-22T09:06:33.967 回答
28

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

.div_wrapper{
    white-space: nowrap;
}
于 2015-03-19T09:02:00.147 回答
22

给这个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>
于 2012-05-22T09:13:46.650 回答
17

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

除了使用该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）弹性盒（小提琴）

.container {
  display: flex;
}
.container div {
  flex: 1;
}
<div class="container">
  <div>A</div>
  <div>B</div>
</div>

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

于 2015-03-19T10:15:09.893 回答
3

CSS 弹性盒

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

.container {
  display: flex;
}
.container div {
  flex: auto; /* also 1 or 50% */
}
<div class="container">
  <div>A</div>
  <div>B</div>
</div>

替代方案：CSS 网格

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* also 50% */
}
<div class="container">
  <div>A</div>
  <div>B</div>
</div>

于 2021-08-04T09:45:46.293 回答
1 
<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 说他不想使用花车，因为他不喜欢它们。嗯......在我看来，制作在任何浏览器中看起来都不奇怪的好网页应该是主要目标，而您可以通过使用浮动来做到这一点。

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

于 2012-05-22T09:13:18.787 回答
0

基本上inline-table是用于元素表的，我想你真正需要的是inline-block，如果你不得不使用inline-table，试试这种方式：

<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
于 2012-05-22T08:59:21.353 回答
0

抱歉，如果您打喷嚏更用力，我在这里看到的所有答案要么是骇人听闻的，要么是失败的。

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

于 2014-01-02T12:37:17.910 回答
-1

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

使用 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;}
于 2012-05-22T09:04:25.487 回答