我使用 foundation 进行前端黑客攻击,基本上我希望边 div.context
元素仅采用 div.side
元素之后可用的宽度,但是 div.context
为文本内部提供了太多空间,因此它远离了严格的行:
<div class="row">
<div class="side left" data-equalizer-watch>
<span class="bump">↑</span>
<img src="http://lenta-ua.net/uploads/posts/2014-03/1393873729_apple.png" />
</div>
<div class="context left" data-equalizer-watch>
<h5><a>Lorem ipsum dolor sit amet sit amet dolor sit amet sit amet amet, LOL here we go some text yeeeah</a></h5>
<small class="clearfix">submitted 2 minutes ago by <a>tucnak</a></small>
<div class="info">
<a href="">0 comments</a>
<a href="">share</a>
</div>
</div>
</div>
是的,风格!
.thread .side {
display: inline-block;
padding-right: 10px;
float: left;
}
.thread .context {
display: inline-block;
float: left;
}
最佳答案
这是一个简单的示例,说明如何完成 ti。这是 smashingmagazine.com 用于侧边栏的类似方法:
基本上,您将一个元素定位为绝对位置,并使用填充将另一个元素从其下方推出。
HTML
<div class="row">
<div class="side left" data-equalizer-watch> <span class="bump">↑</span>
<div class="img-wrapper">
<img src="http://lenta-ua.net/uploads/posts/2014-03/1393873729_apple.png" />
</div>
</div>
<div class="context left" data-equalizer-watch>
<h5><a>Lorem ipsum dolor sit amet sit amet dolor sit amet sit amet amet, LOL here we go some text yeeeah</a></h5>
<small class="clearfix">submitted 2 minutes ago by <a>tucnak</a></small>
<div class="info"> <a href="">0 comments</a>
<a href="">share</a>
</div>
</div>
</div>
CSS
.row {
width:100%;
background:red;
padding-left:140px;
position:relative;
}
.thread .side {
display: inline-block;
padding-right: 10px;
float: left;
}
.side.left {
width:120px;
position:absolute;
top:0;
left:0;
background:green;
}
.img-wrapper {
width:100px;
}
.side.left img {
width:100%;
}
.side.left .bump, .side.left .img-wrapper {
display:inline-block;
}
.thread .context {
display: inline-block;
float: left;
}
关于html - inline-div占用太多空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22576975/