同一个box里图片div和文字div左右排列

你可以使用CSS的flexbox布局来实现图片div和文字div左右排列。具体实现方法如下：

HTML代码：

<div class="box">
  <div class="image">
    <img src="your-image-url" alt="your-image-description">
  </div>
  <div class="text">
    <p>Your text goes here.</p>
  </div>
</div>

CSS代码：

.box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.image {
  flex: 1;
}

.text {
  flex: 1;
}

上述代码中，我们首先将box元素设置为flex布局，并将flex-direction属性设置为row，这样图片div和文字div就可以左右排列了。然后，我们使用align-items属性将图片div和文字div垂直居中对齐。最后，我们使用flex属性将图片div和文字div等分占据box元素的宽度，实现左右排列。

相关问题

同一个box里图片div（占20%）和文字div（占80%）左右排列

你可以使用CSS的flexbox布局来实现图片div和文字div左右排列，并且让图片div占据20%的宽度，文字div占据80%的宽度。具体实现方法如下：

HTML代码：

<div class="box">
  <div class="image">
    <img src="your-image-url" alt="your-image-description">
  </div>
  <div class="text">
    <p>Your text goes here.</p>
  </div>
</div>

CSS代码：

.box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.image {
  flex: 1;
  width: 20%;
}

.text {
  flex: 4;
  width: 80%;
}

上述代码中，我们首先将box元素设置为flex布局，并将flex-direction属性设置为row，这样图片div和文字div就可以左右排列了。然后，我们使用align-items属性将图片div和文字div垂直居中对齐。接着，我们使用flex属性将图片div和文字div按照1:4的比例分配宽度，实现占据20%和80%的效果。最后，我们使用width属性来设置图片div和文字div的具体宽度。

同一个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` 左右排列了。