以下是我的代码,我想了解为什么 #firstDiv被所有浏览器推倒.我真的想要理解这样一个事实的内在运作,即它被推向下而不是以某种方式向上拉.(我知道如何调整他们的上衣:))
而且我知道它的溢出:隐藏了导致它,但不确定为什么它推动该div向下.
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}我试图连续排列小盒子.这些盒子各有两个元素.在某些情况下,第一个元素是如此"多"的文本,它分成2行.如果发生这种情况,此特殊行中的所有其他块如下所示.
长话短说,这里是一个例子:http: //jsfiddle.net/PMRQ5/
如果您调整HTML字段的大小,您可以看到我的意思.有人可以帮忙吗？
.songlist .even {
background: #c2e4fa;
background: -moz-linear-gradient(top, #d9eefc, #c2e4fa);
margin-right: 5px;
}
.songlist .odd {
background: #faf4c2;
background: -moz-linear-gradient(top, #fcf8d9, #faf4c2);
margin-right: 5px;
}
.songlist .itemBox {
font-size: 11px;
width: 220px;
min-height: 100px;
clear: both;
padding: 5px;
margin: 5px 10px 5px 10px;
display: inline-block;
position: relative;
border-radius: 4px;
}
.songlist .itemBox .title {
font-weight: bold;
font-size: 16px;
}
.songlist .itemBox .artist {
clear: left;
font-size: 11px;
}
.songlist .itemBox .titlerating {
bottom: 10px;
left: …今天早上我发现了一个奇怪的CSS问题,我希望CSS专家可以帮助我.在这个演示中,为什么红色div中的文本会将其推下来？我预计这两个div会彼此相邻.谢谢!
编辑:谢谢大家的答案.我会稍微接受一个答案.任何人都可以解释为什么会这样吗？
这非常简单,我对这种行为感到困惑.我希望我的搜索结果显示在一个连续2个块的漂亮网格中.但相反,它显示出弯曲,其中带有更多文本的div会将其他内容推向其他内容.我怎样才能解决这个问题？
这是一个简单的示例,显示了FF和Chrome中的问题:
<html>
<body>
<style>
.search_result
{
border: thin solid;
width: 250px;
height:200px;
display: inline-block;
}
</style>
<div style='width:508px'>
<div class='search_result'>
Meerkats demonstrate altruistic behavior within their colonies; one or more meerkats stand sentry while others are foraging or playing, to warn them of approaching dangers ...
</div>
<div class='search_result'>
one or more meerkats stand sentry
</div>
<div class='search_result'>
meerkats
</div>
</div>
</body>
</html>