关于块宽度..这是怎么回事这里

见上面的图片，这是我的CSS：

.activity { 
    width: 70%; 
    margin: 0 auto; 
} 

.activity .head { 
    margin-top: 3%; 
    text-align: center; 
} 

.activity .body { 
    margin-top: 3%; 
}

为什么都直列块不能在同一行？

<div class="body" style="background-color:red"> 
    <div style="background-color:green; display:inline-block; width:50%"> 
    </div> 
    <div style="background-color:blue; display:inline-block; width:49.6%"> 
    </div> 
</div>

当我将第二块宽度设置为49.6%时，为什么它在下一行开始？

来源

2015-04-24 More More

请具体谈谈您的问题！你想从你的图像中获得标记吗？ –

什么问题？告诉我们，所以我们可以帮助您解决它！ :) – Cullub

我编辑帖子添加它 - 现在看他的评论 – Cullub

内联块之间的空白字符占用一些空间，因此增加了线框上的总宽度。

如果在HTML代码中使内联块元素彼此相邻，那么它的工作方式与您的预期相同。

.body div { 
 
    height: 40px; 
 
    vertical-align: top; 
 
}

<div class="body" style="background-color:red"> 
 
<div style="background-color:green; display:inline-block; width:50%"></div><div style="background-color:blue; display:inline-block; width:50%"></div> 
 
</div>

来源

2015-04-24 12:49:10

谢谢，我已经尝试过“vertical-align：top;”但不工作。尽管如此，我的大多数元素都有自己的字体样式，所以“font-size：0;”可能会很好。 –

垂直对齐对于解决方案并不重要。关键在于两个'div'元素在HTML代码中彼此相邻。 –

关于块宽度..这是怎么回事这里

回答

相关问题