为什么较大的文本会将内容向左推下？

所以我做了四个简单的div，我将改变头div的属性。为什么较大的文本会将内容向左推下？

的HTML：

<div class="third"> 
     Lorem Ipsum 
    </div> 
    <div class="third"> 
     Lorem Ipsum 
    </div> 
    <div class="third"> 
     <div class="header">Lorem Ipsum</div> 
    </div>

的CSS：

.third { 
    width:500px; 
    display:inline-block; 
    border-right:1px solid black; 
    height:400px; 
} 
.header { 
    margin-left:16%; 
    font-family:Arial; 
    font-size:200%; 
}

第三格的伟大工程，但前两个div的推，因为更大的文字了。我能做些什么来防止这个问题？

来源

2014-03-26 123321123321

总之，加上'垂直对齐：top'为'.third'。默认的“vertical-align”值是“baseline”。 “内联块”的基线是正常流程中最后一个线框的基线，除非它没有流入线框或者其“溢出”属性具有除“可见”以外的计算值，否则这种情况下的底线是底部边缘边缘 - 请参阅http://stackoverflow.com/questions/12950479/display-inline-block-elements-vertical-aligns-inproperly/12950536#12950536 – andyb

@CTravel将该宽度更改为“100px” （或使您的浏览器宽度> 1500px），所以块不会打包看到问题。 – andyb

添加vertical-align: top将解决您的问题。

小提琴：http://jsfiddle.net/QX7FH/

如果你很好奇，为什么这个作品，andyb做了伟大的工作，解释为什么在这里：Why does this inline-block element have content that is not vertically aligned

来源

2014-03-26 16:42:35 Jack

请尝试解释为什么你的答案解决了问题。 – andyb

@andyb哇，对不起。我其实认为你在评论中做了很好的解释（我给了你一个赞成）。发布我的答案后，我看到了您的答案和链接。我很抱歉没有像你原来的帖子那么彻底。 – Jack

这不是真正的彻底，而是关于分享你的问题是什么以及你的解决方案为什么修复它的知识。我见过这么多答案downvoted不解释所以只是试图帮助你不会遭受同样的命运！没有必要道歉:) – andyb

div的自动设置为块元素。这意味着他们将创建一个换行符。如果您还将display:inline-block;放入您的css文件中用于.header，则应该防止它创建新行。

来源

2014-03-26 16:40:48 GreeKatrina

你可以使用花车，而不是内联块，你也获得浏览器支持的一点点（旧IE的）：

http://jsfiddle.net/aP9Fu/

.third { 
    width:500px; 
    display:block; 
    border-right:1px solid black; 
    height:400px; 
    float: left; 
}

另外，我增加了一个容器周围所有的div以清除漂浮物。

来源

2014-03-26 16:41:03

为什么较大的文本会将内容向左推下？

回答

相关问题