父div中的中心3 div

Question

我试图将3 div放入父div而没有结果。 你能帮帮我吗？

HTML：

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

CSS：

#container {
   text-align: center;
}

#left, #middle, #right {
    width: 200px;
    float: left;
    background: red;
    height: 90px;
}

结果：

Answer 1

将float:left;更改为display:inline-block;，如下所示：

#left, #middle, #right {
    width: 200px;
    display:inline-block;
    background: red;
    height: 90px;
}

Answer 2

你可以尝试这个：

#left, #middle, #right {
     width: 200px;
      display:inline-block;
      background: red;
      height: 90px;
}

http://re2c.org/examples/example_01.html

Answer 3

尝试显示flex。您需要添加供应商前缀！

＆＃13;

＆＃13;

#container {
   text-align: center;
  
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#left, #middle, #right {
    width: 200px;
    background: red;
    height: 90px;
  
}

＆＃13;

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

#container {
   text-align: center;
}

#left, #middle, #right {
    width: 200px;
    margin:0px auto;
    height: 90px;
}

#left
{
  background: red;
}

#middle
{
  background:blue;
}

#right
{
  background: green;
}

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

Answer 5

添加Bootstrap CSS并查看此示例。

下面：

• COL =列
• MD =中型设备
• 4表示屏幕的分区，因为单行中可能的最大列为12

所以4/12 = 3个小组的结果。

<div class="row">
  <div class="col-md-4">left</div>
  <div class="col-md-4">middle</div>
  <div class="col-md-4">right</div>
</div>

尝试Bootstrap它会让你的生活变得轻松。 这是您想要的Grip系统的链接Bootstrap Grid System。

Answer 6

删除float＆amp;添加显示inline-block

#left, #middle, #right {
    width: 200px;
    display:inline-block;
    background: red;
    height: 90px;
}

Answer 7

将margin-left: auto, margin-right:auto, width: 600px添加到您的容器中。

由于