Question

我在div包装器中有3个div。

Div 1 设置为float:left， Div 3 设置为float:right。

如何强制 Div 2 占用剩下的所有空间，居中并且所有3个仍然在一行？

如果我尝试margin: 0 auto;或overflow: hidden; Div 3 并不会停留在同一行。

.div_wrapper {

    width: 600px;
}

.div_1{ 
    float: left;
}
.div_2 {        
    margin: 0 auto; NOT WORKING
    overflow: hidden; NOT WORKING
}
.div_3 {
    width: 60px;
    float: right;
}

Answer 1

如果将所有三个浮动到左侧并将其宽度设置为33.33333％。

Answer 2

问题的解决方法是使用<div>元素的顺序，并在父级上设置overflow:auto。 <div>默认为块级元素，因此您无需为此尝试使用所有可用宽度做任何特殊操作。

注意孩子的顺序：1,3,2

<style>
.div_wrapper {width: 600px; overflow:auto;}

.div_1 {width:60px; float:left;}
.div_2 {}
.div_3 {width:60px; float:right;}
</style>

<div class="div_wrapper">
    <div class="div_1">Morbi mollis iaculis egestas. Nullam quis nisi at lorem laoreet congue non sollicitudin ante.</div>
    <div class="div_3">Pellentesque sodales, justo eget iaculis egestas, nulla lectus consectetur est, pharetra rhoncus purus tortor vel mauris. </div>
    <div class="div_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id justo quis purus suscipit finibus nec eu augue. Suspendisse sollicitudin rhoncus risus, sit amet consequat velit suscipit non. Vivamus faucibus faucibus nisl eu gravida. Etiam id ipsum non lorem semper tincidunt. Suspendisse potenti. Quisque massa orci, venenatis at purus sed, maximus ullamcorper sem. Cras non sollicitudin quam, ut iaculis felis. Donec rhoncus nisi quis sapien imperdiet tincidunt nec et massa. Mauris felis leo, viverra in consectetur quis, malesuada non neque. Cras at magna massa. Cras non tellus vel ex euismod blandit et non dolor. Nullam at ex nisi. Integer feugiat congue euismod. Quisque consequat urna eget ligula finibus pellentesque.</div>
</div>

Answer 3

您可以在第一个wrapper内使用另一个wrapper，其最大宽度为540px，如果600px是最大宽度，它也会浮动到左侧。在inner_wrapper内，你只需再分配一个％宽度。

HTML：

<div class="div_wrapper">
    <div class="div_inner_wrapper">
        <div class="div_1_2 div_1"></div>
        <div class="div_1_2 div_2"></div>
    </div>
    <div class="div_1_2_3 div_3"></div>
</div>

CSS：

.div_wrapper {
    width: 600px;
}

.div_inner_wrapper {
    float: left;
    width: 540px;
}
.div_1_2 { 
    float: left;
    width:50%;
}
.div_1 {
    height: 30px; // only here for displaying the div
    background-color: green; // only here for displaying the div
}
.div_2 {
    height: 30px; // only here for displaying the div
    background-color: yellow; // only here for displaying the div
}
.div_3 {
    float:left;
    width:60px;
    height: 30px; // only here for displaying the div
    background-color: red; // only here for displaying the div
}

Example

如何占用div之间的中心空间？

3 个答案: