同一个box里两个div左右排列

可以使用 CSS 的 `float` 属性来实现两个 div 左右排列。具体实现步骤如下：

1. 在 HTML 中创建两个 div，分别为 `left-div` 和 `right-div`。
2. 使用 CSS 给这两个 div 设置宽度和高度，并使用 `float` 属性将 `left-div` 设置为左浮动，将 `right-div` 设置为右浮动。
3. 如果需要让两个 div 的高度一致，可以使用 `clearfix` 清除浮动，或者使用 CSS Flexbox 布局。

示例代码如下：

<div class="container">
  <div class="left-div">左侧内容</div>
  <div class="right-div">右侧内容</div>
</div>

.container {
  width: 100%;
  height: 200px;
}
.left-div {
  width: 50%;
  height: 100%;
  float: left;
  background-color: #ccc;
}
.right-div {
  width: 50%;
  height: 100%;
  float: right;
  background-color: #f00;
}

这样就可以让 `left-div` 和 `right-div` 左右排列了。

相关问题

两个div上下排列

可以使用CSS中的flexbox布局来实现两个div上下排列。代码如下：

HTML代码：

<div class="container">
  <div class="box1">上面的div</div>
  <div class="box2">下面的div</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
}

.box1 {
  background-color: #FFC0CB;
  height: 100px;
}

.box2 {
  background-color: #ADD8E6;
  height: 200px;
}

以上代码中，`.container`为包含两个div的容器，设置了`display: flex`和`flex-direction: column`，表示容器内的元素按照垂直方向排列。`.box1`和`.box2`分别为两个div，设置了不同的高度和背景颜色，可以根据需要进行调整。

如何让两个div横向排列

要让两个div横向排列，可以使用CSS的flexbox布局或者CSS的float属性。

使用flexbox布局：
1. 在父容器上设置display为flex，这样子元素会自动横向排列。
2. 设置子元素的flex属性来控制宽度比例。

示例代码如下：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

.container {
  display: flex;
}

.box1, .box2 {
  flex: 1;
}

使用float属性：
1. 将两个div都设置为浮动（float: left）。
2. 父容器设置overflow: auto，以防止父容器塌陷。

示例代码如下：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

.container {
  overflow: auto;
}

.box1, .box2 {
  float: left;
}