如何将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

Stack Snippet

.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;
}

然后，可选地，如果您希望每个子div的内容居中：

#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>