Question

这是我的jsfiddle code 如果你改变水平尺寸，div（第1和第2部分）是水平居中的。但如果宽度较低，第2节将在第1节下面。问题是如何将它们居中？我用包装器尝试了许多可能性，但没有结果。你能帮帮我吗？

Answer 1

我认为Media Queries正是您所寻找的。

它们允许您根据 - 例如 - 窗口宽度有条件地定义CSS样式。

@media (min-width:450px) {
    //some CSS to center the div.
}

Answer 2

您可以使用媒体查询来执行此操作。

@media only screen and (max-width: 540px) { //Css here } 您需要找出它何时打破，然后将最大宽度更改为该值。并在您的媒体查询css中，而不是使用px使用％。

但是你还需要在主div上有一个宽度。 width:100%;

这是一个DEMO和下面的代码：

样本： http://jsfiddle.net/QV26k/18/

* {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 12px;
}
body {
    background-color: darkgreen;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
div#page_content {
    background-color: darkblue;
    position: relative;
    width: 90%;
    max-width: 430px;
    min-width: 220px;
    padding: 10px 0px 10px 0px;
    margin: 20px auto;
}
div#main {
    background-color: pink;
    position: relative;
    display: inline-block;
    margin: 0px auto;
    width:100%;
}
div#section_first {
    width: 200px;
    background-color: yellow;
    display: inline;
    float: left;
    margin-left: 10px;
}
div#section_second {
    width: 200px;
    background-color: red;
    display: inline;
    float: left;
    margin-right: 10px;
    margin-left: 10px
}
div#clearer {
    clear:both;
}

@media only screen and (max-width: 540px) {

div#section_first {
    width: 46%;
    background-color: yellow;
    display: inline;
    float: left;
    margin-left: 2%;
}
div#section_second {
    width: 46%;
    background-color: red;
    display: inline;
    float: left;
    margin-right: 2%;
    margin-left: 2%;
}
}

Answer 3

嗯，我想我明白你的意思了。好吧，因为你有#section_first和#section_second的固定宽度，我认为这仍然可以通过（大多数）媒体查询来完成。在给出修复之前，需要更改几件事情：

首先，从您对display:inline-block的定义中删除#main，否则以后#main的孩子会成为问题。另外，从display:inline和#section_first中移除#section_second，因为您应用于它们的浮动完全覆盖了该样式，并且它们只会在以后引起问题。

现在，重新安排您的HTML，以便#clearer允许#main缩放到其内容的大小（基本上，#clearer内移动#main）：

<div id="page_content">
    <div id="main">
        <div id="section_first">Section 1</div>
        <div id="section_second">Section 2</div>
    </div>
    <div id="clearer"></div>
</div>

此时，布局中确实没有任何改变 - 现在让我们为媒体查询添加一些响应性：

@media (max-width:478px) {
    div#section_first {
        margin:0 auto;
        float:none;
    }
    div#section_second {
        margin:0 auto;
        float:none;
    }
}

计算出最大宽度478px，因为#main的宽度为90％，其内容的组合宽度为200px + 200px + 30px（边距）= 430px。并且430px / 0.9 = 477.777px，我们可以将其舍入到478px，以便在您出现不必要的显示问题之前启用备用样式。媒体查询中的样式会停止子项的浮动，并将它们与公共margin:0 auto。

对齐

这里有updated JSFiddle演示修改后的代码。请注意，我还使用CSS删除了<html>和<body>上的默认边距。如果您有任何问题，请告诉我们！

当页面宽度较低时，将两列（div）对齐

3 个答案: