的div留下飄然隱藏溢出容器與寬度100％

下面是代碼：的div留下飄然隱藏溢出容器與寬度100％

<div style="width:100%;height:200px;overflow:hidden;border:1px solid red;" id="container"> 
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner"> 
first div</div> 
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner"> 
second div</div> 
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner"> 
third div</div> 
</div>

如何我可以在類內留在網上，如果屏幕高度較小然後1200像素是div的？如果屏幕高度小於1200px，那麼該代碼將顯示一個低於另一個的div。

感謝

來源

2012-10-23 Vlatko

@media screen and (max-width: 1200px) { 
    #container { width: 400px; height: 300px; } 
}

使用媒體查詢。

Demo，請注意，內聯樣式會覆蓋外部CSS，因此我必須移動#container樣式。

來源

2012-10-23 19:46:02 bookcasey

我可以找到修復的IE7＆IE8＆和Safari的css3和@media工作？ – Vlatko

這是因爲你已經用width：400px硬編碼了你內部div的寬度。

您需要將它們設置爲百分比......以及在.inner類中，最好。

.inner { 
    float:left; 
    width:33%; 
    height:100px; 
    border: 1px solid green; 
}

你也可以添加一個最小寬度.inner，如果你想阻止他們縮小太多，並與約@media查詢，使它在較小的尺寸更靈活bookcasey的評論結合起來。

來源

2012-10-23 19:48:05

我想固定寬度的div與類內心200px。 – Vlatko

您無法限制容器的外部寬度，並期望浮動元素忽略其容器。現在，如果你想讓它們消失，你必須將它們包含在一個固定寬度的容器中，設置爲所有內部div的合併寬度。這樣，它們將在它們的容器的上下文內彼此相鄰地浮動，但是它們的容器將在超過最外面的容器的寬度的地方消失。看到這個jsFiddle的例子：http://jsfiddle.net/mori57/wpdKe/ –

我勸你到外容器上添加

position: relative;

- 然後把

position: absolute; left: 0; top: 0;

在 '內部' 容器。然後你可以按照你想要的方式控制它們。把'位置：親戚'放在重要位置是很重要的。在外部容器上，因爲內部容器需要絕對的東西...如果這使得感覺。我希望它有幫助。

來源

2012-10-23 19:51:53 Zeth

的div留下飄然隱藏溢出容器與寬度100％

回答

相關問題