兩個DIV並排在一個較小的DIV

Question

我試圖讓兩個DIV並排放置在一個較小的DIV內：overflow; hidden; 我希望這兩個DIV是並排的，並且它們的一些內容由於其寬度較小的父DIV而導致隱藏。相反，最後一個DIV在其他DIV下移動，即使它們都浮動：left ;.

HTML：

<div id="wrapper"> <!-- wrapper --> 
    <div id="nav"> <!-- nav --> 

    </div> <!-- /nav --> 
    <div id="container"> <!-- container --> 

    </div> <!-- /container --> 
</div> <!-- /wrapper --> 

CSS：

#wrapper { 
    float:left; 
    height:960px; 
    width:540px; 
    background-color:#eeeeee; 
    overflow:hidden; 
} 

#nav { 
    float:left; 
    width:460px; 
    height:960px; 
    background-color:red; 
} 

#container { 
    float:left; 
    width:540px; 
    height:960px; 
    background-color:green; 
} 

這是我想要的效果：

Answer 1

如果你想在兩個元素並排的一面，我想你必須添加某種附加的「包裝」元素環繞你#nav和#container元素。 （溢出設置爲auto，這樣你可以看到的元素是彼此相鄰。）

例子：

#wrapper { 
 
    float: left; 
 
    height: 960px; 
 
    width: 540px; 
 
    background-color: #eeeeee; 
 
    overflow: auto; 
 
} 
 
#wrap { 
 
    width: 1000px; 
 
} 
 
#nav { 
 
    float: left; 
 
    width: 460px; 
 
    height: 960px; 
 
    background-color: red; 
 
    clear: 
 
} 
 
#container { 
 
    float: left; 
 
    width: 540px; 
 
    height: 960px; 
 
    background-color: green; 
 
}

<div id="wrapper"> 
 
    <!-- wrapper --> 
 
    <div id="wrap"> 
 
    <!-- some new wrapping element --> 
 
    <div id="nav"> 
 
     <!-- nav --> 
 

 
    </div> 
 
    <!-- /nav --> 
 
    <div id="container"> 
 
     <!-- container --> 
 

 
    </div> 
 
    <!-- /container --> 
 
    </div> 
 
</div> 
 
<!-- /wrapper -->

Answer 2

我建議防止纏繞，對孩子使用display: inline-block<div>元素，並使用white-space: nowrap;在容器上：

#wrapper { 
 
    float: left; 
 
    height: 300px; 
 
    width: 300px; 
 
    background-color: #eeeeee; 
 
    overflow: hidden; 
 
    /* prevents content wrapping to a new line */ 
 
    white-space: nowrap; 
 
} 
 
#nav { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 960px; 
 
    background-color: red; 
 
    /* purely to move the first element to the left, 
 
    to show that both elements are on the same line: */ 
 
    margin-left: -200px; 
 
} 
 
#container { 
 
    display: inline-block; 
 
    width: 400px; 
 
    height: 960px; 
 
    background-color: green; 
 
}

<div id="wrapper"> 
 
    <!-- wrapper --> 
 
    <div id="nav"> 
 
    <!-- nav --> 
 

 
    </div> 
 
    <!-- /nav --> 
 
    <div id="container"> 
 
    <!-- container --> 
 

 
    </div> 
 
    <!-- /container --> 
 
</div> 
 
<!-- /wrapper -->