两个盒子并排显示左边占80%右边20%css应该怎么布局

可以使用CSS的`float`属性来实现两个盒子并排显示，其中左边的盒子占据80%，右边的盒子占据20%。具体实现步骤如下：

1. 在HTML中创建两个盒子，分别设置类名为`left-box`和`right-box`。

<div class="left-box">左边盒子</div>
<div class="right-box">右边盒子</div>

2. 在CSS中设置`float`属性，让两个盒子并排显示。

.left-box {
  float: left; /* 设置为左浮动 */
  width: 80%;  /* 左边盒子宽度为80% */
}

.right-box {
  float: left; /* 设置为左浮动 */
  width: 20%;  /* 右边盒子宽度为20% */
}

注意，为了让两个盒子并排显示，需要将它们都设置为浮动（`float: left`）。此外，左边盒子的宽度应该为80%，右边盒子的宽度应该为20%。

相关问题

css两个盒子并排

要将两个盒子并排，可以使用以下方法：

1. 使用 float 属性

将两个盒子都设置为 float: left;，并设置宽度和间距即可。示例代码：

<div style="float: left; width: 50%; margin-right: 10px;">盒子1</div>
<div style="float: left; width: 50%;">盒子2</div>

2. 使用 display 属性

将两个盒子都设置为 display: inline-block;，并设置宽度和间距即可。示例代码：

<div style="display: inline-block; width: 50%; margin-right: 10px;">盒子1</div>
<div style="display: inline-block; width: 50%;">盒子2</div>

注意：使用 inline-block 时，需要注意空格和换行符会造成间距，可以使用 font-size: 0; 和 letter-spacing: -1em; 来解决。

css两个盒子并列

要让两个盒子并列，可以使用 CSS 中的 float 属性。首先需要将两个盒子的宽度设置为一定比例，例如50%。然后将它们的 float 属性设置为 left 或 right，这样它们就可以并排显示了。

以下是一个示例代码：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

<style>
.container {
  width: 100%;
  overflow: hidden;
}

.box1, .box2 {
  width: 50%;
  float: left; /* 或者是 right */
}
</style>

在上面的代码中，container div 是一个包含两个盒子的容器。box1 和 box2 div 分别设置为 50% 的宽度，然后使用 float 属性将它们并排显示在容器中。container div 的 overflow 属性设置为 hidden，以防止其中的盒子溢出容器。