两个内联块元素，每个元素的宽度为50％，不能并排放置在一行中
上面的代码试图将#left div和#right div并排放置在一行中。但是，正如您在上面的JSFiddle URL中所看到的，情况并非如此。
我能够解决将div之一的宽度减小到49％的问题。但这不是理想的解决方案，因为两个div之间出现很小的间隙。
我能够解决问题的另一种方法是通过同时浮动两个div。这很好。
但是我最初的问题仍然存在。为什么当两个div都作为内联块元素保留时，它们却不能并排放置？
问题答案：
使用inline-block元素时，whitespace 这些元素之间 始终存在 问题 （该空间大约为4px宽）。
因此，您的两个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>
有几种方法可以解决此问题：
1.这些元素之间没有空格
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结束标记
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>
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
*
-
问题内容： 我希望有两列宽度为50％的列，并避免出现浮点数。所以我想用。 当元素添加到99％的宽度（例如50％，49％）时，它将按预期工作。 当使用100％的宽度（例如50％，50％）时，第二列会中断到第二行。 这是为什么？ 问题答案： 这是因为要考虑html中的空白。如果您删除之间的空白，则可以正常使用。
-
问题内容： 我想有两列宽度为50％的列，并避免出现浮点数。所以我想用。 当元素添加到99％的宽度（例如50％，49％，http：//jsfiddle.net/XCDsu/2/）时，它将按预期工作。 当使用100％的宽度（例如50％，50％，http：//jsfiddle.net/XCDsu/3/）时，第二列会中断到第二行。 这是为什么？ 问题答案： 这是因为考虑到html中的空白。如果您删除之间的
-
问题内容： 您可以设置诸如，和的内联元素的宽度，但是在放置它们之前不会发现任何效果。 a）我认为不能设置内联元素的内联宽度？ b）假设可以设置宽度-在放置内联元素之前，我们不会注意到任何效果（因此我们指定了宽度）。位置如何/在哪里？ c）为什么仅当我们“定位”内联元素时才显示它们的宽度？ 问题答案： 正如其他人提到的那样，设置内联元素的宽度（或其他一些与位置相关的属性）将导致浏览器将元素显示为块元
-
如果我在锚元素中放置div元素，它会使我的超文本标记语言无效。 不在内联元素中放置块级元素的原因是什么？
-
我被分配了一项编程任务，但我被卡住了。其说明如下： 有一个名为“秘密圣诞老人”（给他们礼物）的游戏，有很多孩子参加。对于每个参与的孩子，都有一个来自参与孩子的秘密圣诞朋友。我必须编写一个程序，为每个参与的孩子挑选一个秘密的圣诞老人朋友。 示例：如果Bob，Alice，John和George是参与的孩子，在随机选择之后， 输出可能看起来像 具有相同输入的连续两次程序运行不应有相同的结果。 我的想法是
-
我想知道HTML代码是否有效： 如果它无效，还能做什么？