1

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

这是我的代码现在的样子，我希望 John Doe 和 100 出现在leaderdiv 中的不同行上：

http://jsfiddle.net/ZnuPR/

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;
}
4

6 回答 6

2

您可以简单地浮动.ranking然后离开.name并.score作为display: block.

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

.ranking {
    /* ... */
    float: left;
}
于 2013-08-01T19:25:03.210 回答
1

最快的解决方案是将排名设置为“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/

于 2013-08-01T19:27:45.070 回答
0

我想这就是你的意思：

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

不要使用inline-block并height从容器中取出，它会自动调整到需要的高度。

于 2013-08-01T19:24:26.030 回答
0

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>
于 2013-08-01T19:25:23.427 回答
0

我认为这可能很有用：

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%;
}
于 2013-08-01T19:28:30.000 回答
0

这就是我所做的：

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

于 2013-08-01T19:30:51.243 回答