Question

我使用以下代码创建一个收缩包装和居中页面。如果浏览器窗口宽于最大潜在宽度，一切都很好。在这种情况下，有三个具有固定宽度的浮动段落。如果窗口足够宽，以便它们都可以浮动在同一条线上，则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>

Answer 1

媒体查询是可能的。它会在过时的浏览器中优雅地降级。

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

Answer 2

要进行显示：内联块和居中工作，您需要在父容器上设置text-align：center

无法完全收缩包裹并使元素居中

2 个答案: