html - div 占一个新行而不是仅仅占用更多的垂直空间

Question

在这里你可以看到我的代码:http://jsfiddle.net/sfhs6ra1/

问题是我希望第 2 篇文章的标题不要占据一整行。相反，它应该紧挨着缩略图并占据更多的垂直空间。

我该怎么做？

编辑:它不允许我在不添加一些代码的情况下发布这个，所以这里是:

HTML

<div class="item">
    <div class="vote">
        <div class="score">1</div>
    </div>

    <a href="http://i.imgur.com/"><div class="thumbnail">
        <img src="http://i.imgur.com/P84doIKb.jpg" />
    </div></a>

    <div class="text">
        <a href="http://example.org" class="title link">Title</a>
        <a href="http://example.org" class="domain">example.org</a>
        <div class="submitinfo">submitted 1 minute ago by <span>[username]</span></div>
    </div>
</div>

<div class="item">
    <div class="vote">
        <div class="score">1</div>
    </div>

    <a href="http://i.imgur.com/"><div class="thumbnail">
        <img src="http://i.imgur.com/P84doIKb.jpg" />
    </div></a>

    <div class="text">
        <a href="http://example.org" class="title link">Veeeeeeeeeeeeeeeeeeery, very, very, very, very, very, very, very, very, very, very, very,very, very, very, very, very, very, very, very, very, very, very long title that breaks it.</a>
        <a href="http://example.org" class="domain">example.org</a>
        <div class="submitinfo">submitted 1 minute ago by <span>[username]</span></div>
    </div>
</div>

<div class="item">
    <div class="vote">
        <div class="score">1</div>
    </div>

    <a href="http://i.imgur.com/"><div class="thumbnail">
        <img src="http://i.imgur.com/P84doIKb.jpg" />
    </div></a>

    <div class="text">
        <a href="http://example.org" class="title link">To clarify: the title above shouldn't move to a new line but instead take up more vertical space.</a>
        <a href="http://example.org" class="domain">example.org</a>
        <div class="submitinfo">submitted 1 minute ago by <span>[username]</span></div>
    </div>
</div>

CSS

.item{
    margin-bottom: 10px;
    min-height: 55px;
    min-width: 530px;
    display: table;
    width: 100%;
}

.item .vote{
    display: table-cell;
    width: 20px;
    background-color: #fdc;
    display: inline-block;
    vertical-align: top;
    float: left;
}}
.item .vote .score{
    width: 38px;
    font-weight: bold;
    margin-left: -11px;
    margin-top: 0px;
    margin-bottom: 2px;
}

.item .thumbnail{
    display: table-cell;
    max-width: 70px;
    max-height: 70px;
    display: inline-block;
    vertical-align: top;
    float: left;
}
.item .thumbnail img{
    max-width: 70px;
    max-height: 70px;
}

.item .text{
    display: table-cell;
    background-color: #cfd;
    display: inline-block;
    vertical-align: top;
    float: left;
}
.item .text .title{
    font-size: 17px;
}
.item .text .domain{
    color: #888888;
    font-size: 11px;
    margin-left: 10px;
}
.item .text .submitinfo{
    color: #888888;
    font-size: 10px;
    margin-top: 1px;
}

Answer 1

你可以这样使用:

CSS

.item{
    margin-bottom: 10px;
    min-height: 55px;
    min-width: 530px;
    display: table;
    width: 100%;
}

.item .vote{
    display: table-cell;
    width: 20px;
    background-color: #fdc;
    /*display: inline-block;*/
    vertical-align: top;
    /*float: left;*/
}}
.item .vote .score{
    width: 38px;
    font-weight: bold;
    margin-left: -11px;
    margin-top: 0px;
    margin-bottom: 2px;
}

.item .thumbnail{
    display: table-cell;
    max-width: 70px;
    max-height: 70px;
    /*display: inline-block;*/
    vertical-align: top;
    float: left;
}
.item .thumbnail img{
    max-width: 70px;
    max-height: 70px;
}

.item .text{
    /*display: table-cell;*/
    background-color: #cfd;
    /*display: inline-block;*/
    vertical-align: top;
    /*float: left;*/
}
.item .text .title{
    font-size: 17px;
}
.item .text .domain{
    color: #888888;
    font-size: 11px;
    margin-left: 10px;
}
.item .text .submitinfo{
    color: #888888;
    font-size: 10px;
    margin-top: 1px;
}

fiddle

问题是您在某些元素中使用 display:inline-block 和 float:left 而不是 display:table-cell 作为你应该。