中心自动旁边的div

Question

我有以下HTML代码段：

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

演示： https://jsfiddle.net/1osmm3r3/

问题是，我有宽度：主div上的80％和中间div的特定px。我该怎么做才能将中间div保持在主div的中心，而左右div会自动占用剩下的空间？在中间div上使用margin-left和margin-right设置为auto似乎根本不会移动它，我需要用数字来表示。

这就是我想要的样子：

Answer 1

使用display: flex的解决方案。阅读有关flexbox here的更多信息。

#main {
  display: flex;
  flex-direction: row;
}
#main #left {
  flex: 1;
  background-color: coral;
}
#main #middle {
  flex: 1;
  background-color: forestgreen;
}
#main #right {
  flex: 1;
  background-color: cornflowerblue;
}

<div id="main">
  <div id="left">Left</div>
  <div id="middle">middle</div>
  <div id="right">right</div>
</div>

Answer 2

更改一些css

#main
{
    border: 1px solid black;
  text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    overflow: hidden;
}

#middle
{
    border: 1px solid black;
    width: 320px;
    height: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

#right
{
    float: right;
}

#left
{
    float: left;
}

https://jsfiddle.net/1osmm3r3/2/

Answer 3

我认为您的问题的解决方案是将css display：flex 属性应用于div id = main。

#main{
   display: flex;}

Answer 4

删除float: left;样式定义中的#middle {}可以解决您的问题。当您使用float属性时，margin-left: auto;和margin-right: auto;属性不适用。

此外，您可以在DOM中进行一些修改。

<div id="main">
    <div id="left">
        <h1>test</h1>
    </div>

    <div id="right">
        <h1>test</h1>
    </div>
    <div id="middle"></div>
</div>

FIDDLE

更新了解决方案以匹配OP的预期解决方案。

Updated FIDDLE

Answer 5

试试这个，

#main
{
    border: 1px solid black;
    width: 80%;
    margin-top: 5%;
    overflow: hidden;
}

#middle{
    border: 1px solid black;
    width: 320px;
    height: 320px;
  margin:calc(100% - 80%);
    float: left;
}

#right{
    float: left;
  width:10%;
}

#left{
    float: left;
  width:10%;
}