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。

Answer 2

您应该为.text div设置max-width。在我的例子中，我设置了300px。您可以设置更多取决于您的容器。

.item .text{
    display: table-cell;
    background-color: #cfd;
    display: inline-block;
    vertical-align: top;
    float: left;
    max-width: 300px;
}

Answer 3

从以下类中删除display：inline-block和float：left：

.item .vote
.item .thumbnail
.item .text

由于您的父类＆＃34; .item＆＃34;设置为display：table，因此您必须使用display：table-cell设置子项，但在您的类中显示：inline-block覆盖table-cell。

并且不需要设置float：left in display：table和display：table-cell，因为table-cells彼此相邻。

你最终并纠正了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;
    vertical-align: top;
}
.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;
    vertical-align: top;
}
.item .thumbnail img{
    max-width: 70px;
    max-height: 70px;
}
.item .text{
    display: table-cell;
    background-color: #cfd;
    vertical-align: top;
}
.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;
}

http://jsfiddle.net/sfhs6ra1/9/

Div占用一条新线而不是占用更多的垂直空间

3 个答案: