如何使用CSS垂直排列div容器内的内容？

问题根源 #

1. 选择器不匹配：HTML中容器使用的是class="container"，但CSS里写的是#container（ID选择器），导致容器的样式完全没生效。
2. 浮动破坏文档流：.enwan设置了float:right，浮动元素会脱离正常文档流，不仅会让元素横向排列，还会导致父容器无法正确包裹子元素。

修正后的代码 #

HTML（无需修改）

<div class="container">
    <div>
        <h1 class="enwan">This is an h1 element</h1>
    </div>
    <div>
        <h2 class="enwan">This is an h2 element</h2>
    </div>
</div>

CSS

.container{
    /* div默认就是display:block，这行可省略，若需明确保留也没问题 */
    display: block;
}
.enwan {
    /* 移除float:right，让元素回到正常文档流 */
    color:rgb(241, 93, 177);
    border-right: solid 10px;
    border-left: solid 10px;
    border-style:dotted;
    padding:50px;
    margin: 50px;
    /* 若需要内容右对齐，用text-align替代浮动，不破坏文档流 */
    text-align: right;
}

说明 #

• 替换选择器后，容器样式能正常作用；移除浮动后，块级元素会自然垂直排列。
• 如果需要文字右对齐效果，使用text-align:right是更安全的方式，不会干扰元素的布局流。

内容的提问来源于stack exchange，提问作者Ta M