如何使 3 列两列并排一个中间，我的 divs 将所有内容都向左移动

Question

我正在尝试制作简单的css布局。我要3盒

{Left}  {center}  {right}

所以我写了这段代码

#myleft {
  position: relative;
  float: left;
  width: 20%;
  background-color: #CC6600;
}
#mycenter {
  width: 60%;
  background-color: #f2f4f4;
}
* html #mycenter {
  height: 1%
}
#myright {
  position: relative;
  float: right;
  width: 20%;
  background-color: #FF6633;
}

<div id='left'> Left </div>
<div id='mycenter'> Center </div>
<div id='right'> right </div>

但不是 {left} {center} {right}

{left}
{center}
{right}

我不知道为什么，但即使是浮子也是左右的，也是这样

Answer 1

您没有正确命名您的div id。 它们应该是myleft和myright

body {
  width: 100%;
}
#myleft {
  position:relative;
  float:left;
  width:20%;
  background-color:#CC6600;
}
#mycenter {
  width:60%;
  float: left;
  background-color:#f2f4f4;
}
#mycenter { 
  height:1% 
}
#myright {
  float:left;
  width:20%;
  background-color:#FF6633;
}

<div id='myleft'> Left </div>
<div id='mycenter'> Center </div>
<div id='myright'> right </div>

Answer 2

将你的div 包装成一个主div 并尝试使用 Flexbox

堆栈代码段

.d-flex {
  display: flex;
  flex-wrap: wrap;
}
#myleft {
  position: relative;
  width: 20%;
  background-color: cyan;
}
#mycenter {
  width: 60%;
  background-color: #f2f4f4;
}
#myright {
  position: relative;
  width: 20%;
  background-color: cyan;
}

<div class="d-flex">
  <div id='myleft'> Left </div>
  <div id='mycenter'> Center </div>
  <div id='myright'> right </div>
</div>

Answer 3

当然，还有网格。首先包装"网格化"元素

<div id='wrapper'>
  <div id='left'> Left </div>
  <div id='center'> Center </div>
  <div id='right'> right </div>
</div>
#wrapper {
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
}

然后，如果您希望每个子分区的内容居中，可以选择：

#left, #right, #center {
  margin-left:auto;
  margin-right:auto;
}

Answer 4

.container {
  display: flex;
}
.box1 {
  flex: 1 ;
  text-align: center;
  background-color: gray;
}
.box2 {
  flex: 2;
  text-align: center
}
.box3 {
  flex: 1;
  text-align: center;
  background-color: gray;
}

<div class="container">
  <div class="box1">
    <p> text</p>
  </div>
  <div class="box2">
    <p> text</p>
  </div>
  <div class="box3">
    <p> text</p>
  </div>
</div>