Inline-div占用太多​​空间

Question

我使用基础进行前端黑客攻击，基本上我希望side div.context元素仅在div.side元素之后使用宽度，但div.context在其自身内部提供太多空间，所以它远离严格的行：

<div class="row">
    <div class="side left" data-equalizer-watch>
        <span class="bump">&uarr;</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;
}

Answer 1

这是一个如何完成ti的快速示例。这是smashingmagazine.com用于侧边栏的类似方法：

http://jsfiddle.net/C2hcT/

基本上你将一个元素置于绝对位置，并使用填充将其他元素从其下面推出。

<强> HTML

<div class="row">
    <div class="side left" data-equalizer-watch> <span class="bump">&uarr;</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;
}

Answer 2

我使用了你的html但对css进行了一些更改并制作了这个fiddle

检查这是否对您有所帮助。

我从css中删除了.thread类名，因为我没有在html中找到它

.side {
    display: inline-block;
    padding-right: 10px;
    float: left; //Removed this line
}

.context {
    display: inline-block;
    float: left; //Removed this line
}

并将display:inline-flex;提供给div .row