[英]Inline-div takes too much space
I use foundation for front-end hacking, and basically I want side div.context
element to take only width available after div.side
element, but div.context
gives text inside itself too much space, so it goes away from the strict row: 我使用基础进行前端黑客攻击,基本上我希望side div.context
元素在div.side
元素之后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>
Yeah, styles! 是的,风格!
.thread .side {
display: inline-block;
padding-right: 10px;
float: left;
}
.thread .context {
display: inline-block;
float: left;
}
Here's a quick example of how ti can be done. 这是一个如何完成ti的简单示例。 It's a similar method smashingmagazine.com uses for their sidebars: smashingmagazine.com的侧边栏使用了类似的方法:
http://jsfiddle.net/C2hcT/ http://jsfiddle.net/C2hcT/
Basically you position one element absolute, and use padding to push the other element out from under it. 基本上,您将一个元素定位为绝对,然后使用填充将另一元素从其下方推出。
HTML 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 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;
}
I used your html but made some changes to the css and made this fiddle 我使用了您的html,但是对css进行了一些更改,并做了这个小提琴
Check if this helps you. 检查这是否对您有帮助。
I removed .thread
class name from the css since i didn't find that in the html 我从CSS中删除了.thread
类名,因为我没有在html中找到它
.side {
display: inline-block;
padding-right: 10px;
float: left; //Removed this line
}
.context {
display: inline-block;
float: left; //Removed this line
}
And gave display:inline-flex;
并display:inline-flex;
to the div .row
到div .row
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.