CSS 如何将子 div 设置为父 div 的50%, 50%

在本文中，我们将介绍如何使用 CSS 设置子 div 的宽度为父 div 的50%, 50%。

阅读更多：CSS 教程

通过设置宽度百分比

要实现子 div 的宽度为父 div 的50%, 50%，我们可以使用 CSS 的宽度属性并设置为百分比。首先，我们需要确保父 div 的 position 属性不是 static，这样子 div 才能以相对于父 div 的方式进行定位。

假设我们有以下的 HTML 结构：

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

接下来，我们可以为子 div 指定宽度为50%：

.parent {
  position: relative;
}

.child1, .child2 {
  width: 50%;
}

这样，子 div 的宽度将根据父 div 的宽度来计算，实现了50%, 50%的效果。

使用 flexbox 进行布局

除了使用百分比来设置子 div 的宽度，我们还可以使用 CSS 的 flexbox 布局来实现。

首先，我们需要将父 div 的 display 属性设置为 flex，以启用 flexbox 布局。然后，我们使用 flex-grow 属性来设置子 div 的比例。

HTML 结构和 CSS 样式如下所示：

<div class="parent-flex">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

.parent-flex {
  display: flex;
}

.child1, .child2 {
  flex-grow: 1;
}

在上面的例子中，子 div 的 flex-grow 属性被设置为1，表示它们的比例是相等的。这样子 div 的宽度将根据父 div 的可用空间来进行分配，从而实现了50%, 50%的效果。

设置子 div 的内边距和边框

如果希望子 div 在宽度为50%, 50%的基础上还有内边距和边框，我们可以使用 box-sizing 属性来调整子 div 的盒模型。

首先，我们将 box-sizing 属性设置为 border-box，以使内边距和边框不会改变子 div 的尺寸：

.child1, .child2 {
  box-sizing: border-box;
}

然后，我们可以为子 div 设置相应的内边距和边框：

.child1 {
  padding: 10px;
  border: 1px solid black;
}

通过这种方式，子 div 的内边距和边框将被包含在它们的宽度之内，从而保持宽度仍然为50%, 50%。

示例

下面是一个完整的示例，演示了如何将子 div 设置为父 div 的50%, 50%：

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      position: relative;
    }

    .child1, .child2 {
      width: 50%;
    }

    .parent-flex {
      display: flex;
    }

    .child1, .child2 {
      flex-grow: 1;
    }

    .child1, .child2 {
      box-sizing: border-box;
    }

    .child1 {
      padding: 10px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child1">子 div 1</div>
    <div class="child2">子 div 2</div>
  </div>

  <br>

  <div class="parent-flex">
    <div class="child1">子 div 1</div>
    <div class="child2">子 div 2</div>
  </div>
</body>
</html>

在上面的示例中，首先展示了通过设置宽度百分比的方法，然后展示了使用 flexbox 布局的方法，并添加了内边距和边框。