HTML 如何将 div 拆分为两列 - CSS

在 HTML 中，我们可以使用 CSS 来将一个 div 元素拆分为两列。这可以用于创建响应式的页面布局，使内容在不同设备上显示更好。

下面是一个示例，演示如何将 div 拆分为两列。首先，我们需要一个包含两个子 div 的父 div，然后使用 CSS 来设置这两个子 div 的样式。

HTML 结构

首先，我们需要一个包含两个子 div 的父 div。可以根据需要调整以下示例中的 HTML 结构。

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

CSS 样式

接下来，我们需要使用 CSS 样式将父 div 拆分为两列。可以在 CSS 文件中或者在 HTML 文件中的 <style>标签中添加以下样式。

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}

在上面的 CSS 样式中，我们使用了 flexbox 布局来将父 div 分成两列。display: flex; 在 .container 上创建了一个弹性容器。然后，我们将 .column 的 flex 属性设置为 1，使两列的宽度平均分配。我们还添加了一些 padding 和 border，以便更好地显示列之间的区分。

实际效果

使用上述 HTML 结构和 CSS 样式，我们可以实现一个将 div 拆分为两列的布局。可以根据实际情况调整列的内容和样式。

当页面加载时，两列将在同一行上并排显示。如果父容器的宽度不够，两列将自动折行显示，以适应较小的屏幕。

以下是一个示例的实际效果图：

请根据实际需求进行进一步调整和修改。

以上是关于如何将 div 拆分为两列的简单介绍。希望对你有所帮助！