在 CSS 中放置盒子 [重复]

Posted 2023-03-05

【中文标题】在 CSS 中放置盒子 [重复]

【英文标题】：Placing Box In CSS [duplicate]

【发布时间】：2021-07-01 02:08:58

【问题描述】：

我在一页上有 3 个框，我想将它们并排放置。我应该使用哪个代码？ 利润？ 填充？ 哪个显示器？内联还是阻塞？

.box
  box-sizing: border-box; 
  width: 350px;
  height: 200px;
  background-color: rgba(158, 235, 158, 0.151);
  border-width: 2px;
  border-style: dashed;
  border-radius: 7px;
  border-color: rgb(13, 54, 31);

<div class="box-1"/>
<div class="box-2"/>
<div class="box-3"/>

【问题讨论】：

您的 sn-p 存在一些问题，您可能希望更正这些问题 - 取决于您想要的效果。您的 div 彼此重叠显示，因为它们没有明确终止。它们被解释为嵌套。由于您没有设置 class="box" ，因此不会应用 .box 设置。根据您最终想要的内容，您可能会调查 display inline-block 或 display flex。

【参考方案1】：

使用 flexbox 非常简单。只需将父元素的 flex 方向设置为 row。

<div id="row">
  <div id="box-1" />
  <div id="box-2" />
  <div id="box-3" />
</div>

#row 
  display: flex;
  flex-direction: row;

【参考方案2】：

在您编写的 CSS 中有一个名为 box 的选择器，而您在 html div 中没有使用任何类 box。

在为选择器 box 编写 CSS 时，也缺少大括号。

首先纠正这个语法，然后你可以在3个div的父容器上使用display:flex;。

div也是成对的标签，所以你也必须使用结束div。

.container
 display:flex;

.box
  box-sizing: border-box; 
  width: 350px;height: 200px;
  background-color:rgba(158, 235, 158, 0.151);
  border-width: 2px;
  border-style: dashed; 
  border-radius: 7px;
  border-color: rgb(13, 54, 31);

  

<div class="container">
  <div class="box-1 box">Box 1</div>
  <div class="box-2 box">Box 2</div>
  <div class="box-3 box">Box 3</div>
</div>

【参考方案3】：

可以使用display: flex，默认情况下有flex-direction: row。此外，还可以设置百分比宽度：

.container 
  display: flex;


.container div 
    width: 33%;

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>