CSS縮小瀏覽器窗口，浮動空白

我處於以下情況：我有一個顯示設置爲內聯塊的容器。所以容器的寬度取決於它內部的內容。CSS縮小瀏覽器窗口，浮動空白

在容器內部，我有兩個浮動的div;它們都有固定的寬度; divs彼此相鄰，其中瀏覽器窗口寬度大於兩個div所具有的寬度的總和。

但是，這裏出現了我的問題，當我縮小瀏覽器窗口，以便兩個div不會彼此相鄰時，第二個浮動div會在第一個浮動div下面（因爲它應該是我對此感到滿意），但容器的寬度不會修改，即使第二個div不在那裏，容器仍爲它保留空間。我會鏈接容器以縮小大浮動div的寬度。

任何幫助將是apreciated。非常感謝！

.Container { 
    position:absolute; 
    top:180px; 
    width:100%; 
    text-align:center; 
    background: #DDD; 
} 
.Container span { 
    position:relative; 
    margin-top:0px; 
    text-align:left; 
    display: -moz-inline-stack; 
    display:inline-block; 
    zoom: 1; 
    *display: inline; 
    cursor:default; 
    background: red; 
} 
.div1 { 
    display:block; 
    float:left; 
    padding:0; 
    width:100px; 
    background: coral; 
} 
.div2 { 
    display:block; 
    float:left; 
    padding:0; 
    width:200px; 
    background: #45dc2a; 
}

HTML

<div class="Container"> 
    <span> 
     <div class="div1"></div> 
     <div class="div2"></div> 
    </span> 
</div>

演示：http://jsfiddle.net/C4Hcm/

來源

2013-03-26 silver14_

您需要向我們展示你的代碼，如果你希望我們能夠幫助 – 2013-03-26 09:21:04

你正在使用設置寬度，如果你想縮小/增長，你需要使用百分比。 – Prisoner 2013-03-26 09:43:03

兩個可能的解決方案：

1）使用媒體查詢，這樣，當瀏覽器獲得到一定規模的CSS變化。所以當第二個div下降的時候，你添加了一個媒體查詢，其中div都填充容器。 http://css-tricks.com/css-media-queries/

2）在你的尺寸上使用百分比而不是像素 - 使用像素使div保持固定尺寸瀏覽器使用百分比所發生的變化使得div的百分比達到任何寬度的百分之x。

來源

2013-03-26 09:44:03 matpol

感謝您的回覆。是的，我知道我可以通過媒體查詢來做到這一點，但我喜歡遠離他們，因爲他們需要針對每種情況撰寫文章，而且我正在尋找更自動化的東西。例如，如果浮動div的寬度在每個頁面刷新時不同，我需要另一個媒體查詢，並且我覺得它有點混亂。 – 2013-03-26 09:54:16

至於百分比的想法，我不能使用它，因爲容器是內聯塊，所以它沒有定義的寬度。如果我在裏面設置寬度x％，他們將不知道寬度設置自己。很有趣的是，在IE的舊版本中，我得到了我想要的行爲。看起來，現代瀏覽器已經改變了規則，並且當浮動崩潰時，內聯塊容器的寬度保持不變。 – 2013-03-26 09:55:46

改變你的CSS和HTML或使用JavaScript然後。爲什麼它是內聯塊？ – matpol 2013-03-26 15:19:16

發生這種情況是因爲您已經提到容器的寬度爲100％，因此它會嘗試容納可用空間。還要對代碼進行w3驗證，div標記不能位於span標記內。

來源

2013-03-26 10:01:00

跨度不會嘗試繞過任何內容，因爲它被設置爲內嵌塊，因此其寬度由其內容設置。即使我把文本放在範圍內，而不是那些div，它仍然表現相同。 – 2013-03-26 10:07:10

嘗試用小jQuery腳本

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<style type="text/css"> 
.container{ 
background: yellow; 
width: 100%; 
} 
.container .secondContainer { 
    text-align:left; 
background: blue; 
display: inline-block; 
max-width: 300px; 
} 

.div1 { 
width:100px; 
background: coral; 
float: left; 
} 
.div2 { 
width:200px; 
background: #45dc2a; 
float: left; 
} 
</style> 
<script> 

$(window).resize(function(){ 
if($(".container").width() >= "300"){ 
$(".div1,.div2").css("float", "left"); 
}else{ 
    $(".div1,.div2").css("float", "none"); 

} 
}); 
</script>

以下，並含有人體

<div class="container"> 
<div class="secondContainer"> 
    <div class="div1">This is a text container </div> 
    <div class="div2"> This is a text container This is a text container</div> 
</div>

來源

2013-03-26 11:50:47

CSS縮小瀏覽器窗口，浮動空白

回答

相關問題