CSS 在一个文件中让两个div宽度都为50%，且在一行显示并换行

在本文中，我们将介绍如何使用CSS在一个文件中让两个div宽度都为50%，且在一行显示并换行。

阅读更多：CSS 教程

设置HTML结构

首先，我们需要设置HTML结构，包含两个div元素。

<!DOCTYPE html>
<html>
<head>
    <title>CSS两个div宽度为50%且在一行显示并换行</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="div1">Div 1</div>
        <div class="div2">Div 2</div>
    </div>
</body>
</html>

在上述代码中，我们创建了一个父容器div，并在其中包含了两个子div（div1和div2）。

使用CSS设置div的样式

接下来，我们需要创建一个名为”style.css”的CSS文件，并将其与HTML文件关联起来。

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.div1, .div2 {
    width: 50%;
    margin-bottom: 10px;
}

.div1 {
    background-color: #f2f2f2;
}

.div2 {
    background-color: #cccccc;
}

在上述CSS代码中，我们使用了flex布局，通过设置.container的display属性为flex，可以让两个子div在同一行显示。justify-content: space-between;使得两个子div之间有间隔。flex-wrap: wrap;用于在父容器宽度不足时，将子div进行换行。

接下来，我们通过.div1, .div2选择器来为两个子div设置样式。通过设置width: 50%;，我们使得两个div的宽度都为父容器的50%。为了能够看到每个div的效果，我们为.div1和.div2分别设置了不同的背景颜色。

为了使得两个div之间有一定的间距，我们为.div1, .div2设置了margin-bottom: 10px;。

示例

通过上述的HTML结构和CSS设置，我们可以看到下面的示例效果。

<!DOCTYPE html>
<html>
<head>
    <title>CSS两个div宽度为50%且在一行显示并换行</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="div1">Div 1</div>
        <div class="div2">Div 2</div>
    </div>
</body>
</html>

在以上示例中，我们创建了一个父容器div，其中包含了两个子div（div1和div2）。两个子div的宽度都为父容器的50%。并且，在页面宽度不足以放下两个div时，会自动换行显示。