Question

我目前正在创建一个三行布局，到目前为止没什么难的。问题出现是因为我需要每行100％宽度来填充任何颜色的分辨率，我还需要每行内的div为1024 / 960px并居中。

这些方面的东西：

<div class="top"> <!--This needs to be 100%-->
    <div class="logo-holder"></div> <!--This needs to be 1024px centered-->
    <div class="menu-holder"></div> <!--This needs to be 1024px centered-->
</div>
<div class="main"> <!--This needs to be 100%-->
    <div class="rotating-banner"></div> <!--This needs to be 1024px centered-->
    <div class="promo-holder"> <!--This needs to be 1024px centered-->
        <div class="promo-banner"></div>
        <div class="games-list"></div>
    </div>
</div>
<div class="footer"> <!--This needs to be 100%-->
    <div class="footer-holder"></div> <!--This needs to be 1024px centered-->
</div>

提前Tnks，托尼奥

Answer 1

.top, .main, .footer {
  width: 100%;
  text-align: center;
}
.logo-holder, .menu-holder, .rotating-banner, .promo-holder, .footer-holder {
  width: 1024px;
  margin: 0 auto;
  text-align: left;
}

应该这样做。

Answer 2

默认情况下，div占用100％宽度，因为它们是块级元素。

在top，main，footer的类上为这些内部的div添加margin:0px auto;，添加你的宽度。

这可能不会以ie为中心，因此也要添加text-align:center;，然后在内部div中添加text-align:left;

Answer 3

.top { width:100%; margin:0 auto; }
.logo-holder,  .menu-holder {width:1024px; margin:0 auto }

但是你应该使用ID来持有＆amp;其他独特的包装元素。

创建三行布局

3 个答案: