如何使容器占据其子区的总宽度？

我有2个div是父div的子元素，每个元素的宽度都是百分比（重要的是：我需要的宽度是百分比）。但诀窍在这里，我需要将整个事物与页面中心对齐，这似乎不可能使用margin auto trick。请帮忙！如何使容器占据其子区的总宽度？

这里是到目前为止的代码：

<div class="container" style="display: inline-block; width: 100%;"> 
    <div style="margin: 0px auto;"> 
     <div class="child1" style="width: 40%; float: left; background: lightblue;">Testing Child 1</div> 
     <div class="child2" style="width: 30%; float: left; background: lightgreen">Testing Child 2</div> 
    </div> 
</div>

来源

2017-06-16 Syed Ameed

也许不是使用margin：0px auto，而是使用display：flex;和justify-content：center; ？ – Amy

您可以使用最小宽度 –

您正在使用的将这些元件，常规文档流程的浮动。我将您的.container定义为Flexbox，并通过CSS将孩子居中。

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.child1 { 
 
    width: 40%; 
 
    background-color: lightblue; 
 
} 
 

 
.child2 { 
 
    width: 30%; 
 
    background-color: lightgreen; 
 
}

<div class="container"> 
 
    <div class="child1">Testing Child 1</div> 
 
    <div class="child2">Testing Child 2</div> 
 
</div>

来源

2017-06-16 11:41:46 Gerard

完美的作品。我可以在哪里获得有关显示器柔性属性的良好而全面的指导。我不喜欢技术参考，但很容易理解。 –

看看这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Gerard

你可以使用这样 -

<div class="container" style="display: inline-block; width: 100%;text-align: center"> 
    <div style="margin: 0px auto;"> 
     <div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!-- 
     --><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div> 
    </div> 
</div>

可能它会为你工作:)

来源

2017-06-16 11:43:22

-1

你可以在右侧添加15％的空白，留下您的容器采用以下方式：

.container { 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding: 0 15%; 
 
    background: red; 
 
} 
 
.child1 { 
 
    float: left; 
 
    width: 40%; 
 
    background: lightblue; 
 
} 
 

 
.child2 { 
 
    float: left; 
 
    width: 30%; 
 
    background: lightblue; 
 
}

<div class="container"> 
 
    <div class="child1">Testing Child 1</div> 
 
    <div class="child2">Testing Child 2</div> 
 
</div>

希望这有助于。

来源

2017-06-16 11:44:02

downvote的任何特定原因？它的工作原理，它已经在小编辑之前工作。 –

也许尝试这个办法：

#box { 
 
position: absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    }

<div class="container" style="display: inline-block; width: 100%;text-align: center"> 
 
    <div id="box" style="margin: 0px auto; width: 100%;"> 
 
     <div class="child1" style="width: 40%; float: none; background: lightblue;display: inline-block;">Testing Child 1</div><!-- 
 
     --><div class="child2" style="width: 30%; float: none; background: lightgreen;display: inline-block;">Testing Child 2</div> 
 
    </div> 
 
</div>

来源

2017-06-16 11:44:18 GeorgeBT

您可以用Flexbox的做到这一点：

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<div class="container"> 
 
    <div class="child1" style="width: 40%; background: lightblue">Testing Child 1</div> 
 
    <div class="child2" style="width: 30%; background: lightgreen">Testing Child 2</div> 
 
</div>

来源

2017-06-16 11:44:31 VXp

如何使容器占据其子区的总宽度？

回答

相关问题