HTML

Question

我有3个div，它们向左浮动。它们就像1200宽度，但我有1400分辨率。当我的浏览器将是＆lt; 1200最后一个div将降到最低点。没关系，但是现在我想在我的分辨率优于1200宽度时将它们居中。

我不擅长使用CSS，所以我尝试使用display：table-cell但它无济于事。

HTML

<section class="main-items">
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server">
</div>
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout2" runat="server">
</div>
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout3" runat="server">
</div>
</section>

CSS

.main-items {

}
.items-left {
    float: left;

}

Answer 1

只要您不需要支持IE8或更低版本，就可以使用媒体查询来实现此目的。

.items-left {
    float: left;
}

/* When the browser window is 1200px or wider... */
@media screen and (min-width: 1200px) {
    .main-items {
         width: 1200px;
         margin: 0 auto;
    }
    .items-left {
         float: none;
    }
}

Answer 2

您可以使用包装器div来对齐其中的三个。

<section class="main-items">
    <div class="items-left">
       <dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server">
    </div>
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout2" runat="server">
    </div>
    <div class="items-left">
        <dx:ASPxFormLayout ID="ASPxFormLayout3" runat="server">
    </div>
 </section>

在CSS文件中，插入CSS属性

.main-items {
    margin: 0 auto;
    max-width: 1200px;
}

或者你可以像Zougen Moriver所指出的那样，通过CSS分别将每个 item-left 元素集中在一起。 ;）

中心浮动身体的div

HTML

CSS

2 个答案: