Html CSS中div内的块元素

我正在尝试使两个div在外部div内的单独行上显示。现在我为它们设置了

display:inline block

，但我不确定如何更改此设置以使它们显示在单独的行上

下面是我的代码现在的样子，我希望John Doe和100出现在

leader

div中的不同行中：

HTML

---

我想这就是你的意思：

---

不要使用

内联块

并从容器中移除

高度

，它将自动调整到需要的高度。

您可以简单地浮动

。排序

，然后离开

。name

和

。score

显示为

块

添加了一个

.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>

。排名{
浮动：左；/*浮动*/
保证金：2倍；
填充：2px；
宽度：50px；
高度：65px；
背景颜色：绿色；
颜色：白色；
}
.详情{
浮动：左；/*浮动*/
}
.姓名{
显示：块；/*更改为块*/
}
.得分{
显示：内联块；
}


1.
无名氏
100

最快的解决方案是将排名设置为“float:left；”，将名称和分数设置为“display:block；”。默认情况下，块级元素的跨度为100%，这将确保两个元素位于不同的行上

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

---

我认为这可能很有用：

这就是我所做的：

CSS

---

我去掉了

display:inline block

和

height

div的.name和.score必须有inline block吗？

inline block

并不意味着“blocks in blocks”，以防您从名称推断出。这只是意味着它的行为大部分类似于块元素，但不会占用超过必要的宽度，因此它们保持在同一条线内。我不知道他是想要这样还是这样：-无论哪种方式，回答都很好：DYou可以从.name和.score中删除“display:block；”，但看起来仍然一样。

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

.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>

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

.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%;
}

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