Fatal编程技术网
  • html/
  • Html 两个内联块元素（每个50%宽）不能并排放置在一行中 宽度问题 身体{ 保证金：0； } #左{ 宽度：50%； 背景：浅蓝色； 显示：内联块； } #对{ 宽度：50%； 背景：橙色； 显示：内联块； } 左边 赖特

Html 两个内联块元素（每个50%宽）不能并排放置在一行中 宽度问题 身体{ 保证金：0； } #左{ 宽度：50%； 背景：浅蓝色； 显示：内联块； } #对{ 宽度：50%； 背景：橙色； 显示：内联块； } 左边 赖特

html css

Html 两个内联块元素（每个50%宽）不能并排放置在一行中 宽度问题 身体{ 保证金：0； } #左{ 宽度：50%； 背景：浅蓝色； 显示：内联块； } #对{ 宽度：50%； 背景：橙色； 显示：内联块； } 左边 赖特,html,css,Html,Css,JSFiddle： 上面的代码试图将#left div和#right div并排放置在一行中。但正如您在上面的JSFIDLE URL中所看到的，情况并非如此 我能够解决将其中一个div的宽度减少到49%的问题。看见但这不是一个理想的解决方案，因为两个div之间出现了一个小间隙 我能够解决这个问题的另一种方法是浮动两个div。看见这个很好用 但我最初的问题仍然存在。为什么当两个div都作为内联块元素保留时，它们不能并排安装？或者使它们成为块而不是内联块。这将使div忽略它们之间的空格 <!D

JSFiddle：

上面的代码试图将#left div和#right div并排放置在一行中。但正如您在上面的JSFIDLE URL中所看到的，情况并非如此

我能够解决将其中一个div的宽度减少到49%的问题。看见但这不是一个理想的解决方案，因为两个div之间出现了一个小间隙

我能够解决这个问题的另一种方法是浮动两个div。看见这个很好用

但我最初的问题仍然存在。为什么当两个div都作为内联块元素保留时，它们不能并排安装？

或者使它们成为块而不是内联块。这将使div忽略它们之间的空格

<!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>
或删除标记之间的空格

display:block;
到其中一个div，以减少单个渲染空间占用的空间。

更新：在2021年，使用或更好-而不是
内联块

当使用
内联块
元素时，这些元素之间总会出现
空格
问题（该空格约4倍宽）

因此，您的两个
div
，都有50%的宽度，加上
空白（~4px）的宽度超过100%，因此它会中断。您的问题示例：



正文{
边距：0；/*删除默认正文边距*/
}
div{
显示：内联块；
宽度：50%；
}
.左{
背景色：浅绿色；
}
.对{
背景颜色：金色；
}


foo

bar
这是因为两个div之间的空格被解释为空格。如果将
标记按如下所示排列：


因为元素之间有一个空格。如果删除所有空格


LeftRight

可以通过将css display:inline添加到保存内联元素的div中来完成


font-size: 0;


当使用带有负值的边距删除空白时，有必要将其添加到此特定元素。因为将其添加到类中会影响使用该类的位置


所以使用display:inline会更安全
 css3中的好答案是：


<div id="left">Left</div><div id="right">Right</div>


在父节点中，以及：


white-space: nowrap;


在部门（或其他部门）中占50%

例如：

编辑：

还有另一种方法：


white-space: normal;
vertical-align: top;



用于父节点，并在子节点中覆盖它
添加浮点：左到两个div标记



div{
浮动：左；

}
Flexbox示例-这将用于包含两个并排元素的父类


font-size: 0;



摘自
请检查以下代码：



正文{
保证金：0；
}
#左{
宽度：50%；
背景：浅蓝色；
显示：内联块；
浮动：左；
}
#对{
宽度：50%；
背景：橙色；
显示：内联块；
浮动：左；
}


左

对
@hoosierEE那不是nosense。元素之间的间距很小，这是因为内联块元素将定位在文本行。如果你在一行中放一个空格，就会有一个空格。因此，这种行为是正确的，即使你认为这是一个问题（Vucko称之为错误）。我同意@MarcosPérezGude的观点，这种行为是正确的。从我的帖子中可以看到，有几种方法可以删除空白（我自己使用HTML注释删除空白）。但是如果你介意空白，你可以一直使用，或者使用
float
。我完全使用内联块。我通常的方法是
父{font size:0；}子{font size:1rem；}
。现在使用rems很容易，但标签仍然被解析为空格有点恼人。我以前从未见过删除结束标记修复程序，这是否有任何不稳定性或副作用？还要确保
border
处于关闭状态。如果浮动div，这会增加空间。

white-space: normal;
vertical-align: top;



font-size: 0;



.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}