<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle:http://jsfiddle.net/5EcPK/
上面的代码试图将#left div和#right div并排放在一行中.但正如您在上面的JSFiddle URL中看到的那样,情况并非如此.
我能够解决问题,将其中一个div的宽度减少到49%.见http://jsfiddle.net/mUKSC/.但这不是一个理想的解决方案,因为两个div之间会出现一个小差距.
我能够解决问题的另一种方法是浮动两个div.见http://jsfiddle.net/VptQm/.这很好用.
但我原来的问题仍然存在.为什么当两个div保持为内联块元素时,它们并不适合并排？
Vuc*_*cko 129
使用inline-block元素时,whitespace 这些元素之间总会存在问题(该空间约为4像素宽).
所以,你的两个divs都有50%的宽度加上whitespace(~4px)的宽度超过100%,所以它会断裂.你的问题的例子:
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div>
<div class="right">bar</div>有几种方法可以解决这个问题:
这些元素之间没有空格
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div><div class="right">bar</div>2.使用HTML注释
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div><!--
--><div class="right">bar</div>3.将父项设置font-size为0,然后向inline-block元素添加一些值
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>4.在它们之间使用负边距(不可取)
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div>
<div class="right">bar</div>5.降低闭合角度
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>6.跳过某些 HTML结束标记(感谢@thirtydot作为参考)
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<ul>
<li class="left">foo
<li class="right">bar
</ul>参考文献:
正如@MarcosPérezGude 所说,最好的方法是使用rem,并font-size在html标签上添加一些默认值(如在HTML5Boilerplate中).例:
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
更新:因为它接近2018.使用flexbox甚至更好 - CSS网格布局.
Mat*_*rix 21
css3中的好答案是:
white-space: nowrap;
在父节点中,和:
white-space: normal;
vertical-align: top;
在div(或其他)50%
例如:http://jsfiddle.net/YpTMh/19/
编辑:
还有另一种方式:
font-size: 0;
对于父节点并在子节点中覆盖它
这是因为你的两个div之间的空白被解释为一个空格.如果您将<div>标记排成一行,如下所示,则问题已得到纠正:
<div id="left"></div><div id="right"></div>