css div换行

作者：城若幻影发布日期:2026-05-02 浏览:82

<!DOCTYPE html>
<html>
<head>
<style>
/* 使用 CSS 控制 div 换行 */
.container {
    width: 100%;
}

.box {
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: lightblue;
    margin: 5px;
}

/* 强制换行 */
.break {
    clear: both;
}
</style>
</head>
<body>

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="break"></div> <!-- 强制换行 -->
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
</div>

</body>
</html>

解释说明：

.container 是一个包含所有 div 元素的容器。
.box 类用于定义每个 div 的样式，使其以 inline-block 方式显示，这意味着它们会在同一行排列，直到没有足够的空间。
.break 类使用了 clear: both; 属性来强制换行。当遇到带有 .break 类的 div 时，后续的 div 会从新的一行开始排列。

通过这种方式，你可以控制 div 元素在页面中的换行行为。

上一篇：css超过2行省略号

下一篇：css单数选择器