Question

我试图让2个div出现在外部div中的不同行上。现在我为它们设置了display:inline-block，但我不知道如何更改它以使它们出现在不同的行上。

以下是我的代码现在的样子，我希望John Doe和100出现在leader div中的不同行：

HTML

<ul>
    <li class="leader">
        <div class="ranking">1</div>
        <div class="name">John Doe</div>
        <div class="score">100</div>
    </li>
</ul>

CSS

.leader {
    border: 1px solid;
    background-color: #E6E6E6;
    display: inline-block;
    width: 400px;
    margin: 2px;
    padding: 2px;
    background-repeat: no-repeat;
    height: 75px;
}

.ranking {
    display: inline-block;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

.name {
    display: inline-block;
}

.score {
    display: inline-block;
}

Answer 1

您可以简单地浮动.ranking，然后将.name和.score保留为display: block。

http://jsfiddle.net/ZnuPR/7/

.ranking {
    /* ... */
    float: left;
}

Answer 2

最快的解决方案是将排名设置为“float：left;”以及“display：block;”的名称和分数。块级元素默认情况下跨度为100％，这将确保2个元素位于单独的行上。

.leader {
    border: 1px solid;
    background-color: #E6E6E6;
    display: inline-block;
    width: 400px;
    margin: 2px;
    padding: 2px;
    background-repeat: no-repeat;
    height: 75px;
    }

.ranking {
    float:left;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

.name {
    display: block;
}

.score {
    display: block;
}

http://jsfiddle.net/ZnuPR/2/

Answer 3

我认为这就是你的意思：

http://jsfiddle.net/ZnuPR/6/

请勿使用inline-block并从容器中移除height，它会自动调整到所需的高度。

Answer 4

http://jsfiddle.net/ZnuPR/8/

添加了.details包装器和一些花车。

.ranking {
    float:left; /* Floating */
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}
.details {
    float:left; /* floating */
}

.name {
    display: block; /* Changed to block */
}

.score {
    display: inline-block;
}

<ul>
    <li class="leader">
        <div class="ranking">1</div>
        <div class="details"> 
          <div class="name">John Doe</div>
          <div class="score">100</div>
        </div><!-- end details wrapper-->
    </li>
</ul>

Answer 5

我认为这可能有用：

http://jsfiddle.net/ZnuPR/10/

.leader {
    border: 1px solid;
    background-color: #E6E6E6;
    display: inline-block;
    width: 400px;
    margin: 2px;
    padding: 2px;
    background-repeat: no-repeat;
}

.ranking {
    width: 100%;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

.name {
    width: 100%;
}

.score {
    width: 100%;
}

Answer 6

这就是我所做的：

CSS

.leader {
        border: 1px solid;
        background-color: #E6E6E6;
        display: inline-block;
        width: 400px;
        margin: 2px;
        padding: 2px;
        background-repeat: no-repeat;
}

.ranking {
    display: inline-block;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

我摆脱了display: inline-block和height

在CSS中阻止div中的元素

6 个答案: