無法完全收縮包裝和居中元素

我正在使用以下代碼來創建收縮包裝和居中頁面。如果瀏覽器窗口比最大潛在寬度寬，一切都很好。在這種情況下，有三個固定寬度的浮動段落。如果窗口足夠寬以便它們都可以浮在同一條線上，則div將居中並正確包裝。但是，當瀏覽器較窄時，其中一個段落換行到下一行，div擴展到窗口的整個寬度，不再收縮包裝。我嘗試過所有我能想到的事情，並且要放棄並繼續前進，除非有人有新的想法。奇怪的是，它在ie7中運行良好。去搞清楚。無法完全收縮包裝和居中元素

<!doctype html> 

<head> 
<style type="text/css"> 

header, footer, nav, section, article { display: block; } 

body 
{ 
    font-size:1em; 
    margin:0; 
    padding:0; 
    font-family: Verdana, Arial, Helvetica, Sans-Serif; 
    color:#000; 
    background:#ddd url(images/BG.jpg); 
} 

/*********** Start shrink wrapped and centered layout styles ************************/ 
#page { 
    position:relative; 
    overflow:hidden; 
} 
#container { 
    float:left; 
    position:relative; 
    left:50%; 
} 
#content 
{ 

    float:left; 
    position:relative; 
    right:50%; 
} 
/*********** End shrink wrapped and centered layout styles ************************/ 
#content 
{ 
    border:solid 4px #bbb; 
} 
p 
{ 
    width:20em; 
    background-color:red; 
    float:left; 
} 
</style> 
<body> 
<div id="page"> 
    <div id="container"> 
    <div id="content"> 
     <p>p1</p> 
     <p>p2</p> 
     <p>p3</p> 

    </div> 
    </div> 
</div> 
</body> 
</html>

來源

2012-01-17 Rob

你可以嘗試使用'diplay：直列block'代替'float' - 但是這在IE7中不起作用：http://jsfiddle.net/j6NuE/ – 2012-01-17 23:48:04

當我使用內聯塊時，我得到了相同的行爲。我遇到的問題是瀏覽器寬度強制浮動段落換行。包含div不再收縮。我希望它在段落換行時繼續縮小。在這種情況下，它會在第一個包裝時收縮，然後在下一個包裝時再收縮。因此，根據瀏覽器窗口的寬度，包含div（60em，40em或20em）會有三種可能的寬度。 – Rob 2012-01-18 02:41:00

它可能與媒體查詢。它會在過時的瀏覽器中優雅地退化。

p {width:200px; height:20px; background:salmon; float:left; margin:10px; padding:10px;} 
div {background:lightblue; overflow:auto; width:720px; margin:0 auto;} 

@media screen and (max-width: 720px) { 
div{width:480px;} 
} 
@media screen and (max-width: 480px) { 
div{width:240px;} 
}

Demo

來源

2012-01-18 01:29:01 bookcasey

爲了使顯示：inline-block的和中心工作，你需要設置文本對齊：中心在父容器上

來源

2013-11-22 19:43:01 girok

無法完全收縮包裝和居中元素

回答

相關問題