并排<div>和网站中心</div>

Question

我正在尝试将我的网站从使用表转换为仅使用css和div但是我遇到了很多问题，试图弄清楚如何正确地做到这一点，我一直在寻找关于居中的教程有css的网站以及如何将div放在一起但是我真的找不到这两个并且我一直对如何完全实现这一点感到困惑，我问了一下我被告知使用绝对定位但我仍然无法真正地围绕这个。

所以基本上我如何将两个中央div并排排列，同时保持整个事物在浏览器中居中？下图是我想要实现的布局：

蓝色框是我可能想要放入其中的其他东西，例如博客需要再次使用并排div。

现在我有以下布局：

<div id="wrap">
  <div id="banner"> banner </div>
  <div id="navbar"> navigation links </div>
  <div id="body"> stuff </div>
  <div id="footer"> stuff </div>
</div>

Answer 1

首先，你需要一个主容器来集中所有东西。然后是两个独立的div。请参阅以下HTML：

<div id="main">
   <div class="box">Left Box</div>
   <div class="box">Right Box</div>
   <div class="clear"></div>
</div>

以下是您需要的CSS：

#main{
   width:960px;
   margin:0 auto;
}

.box{
   width:450px;
   float:left;
   border:solid 1px #000000;
}

.clear{
   clear:both;
}

希望有所帮助。

Answer 2

总体思路：http://jsfiddle.net/JjbJE/

有点具体，但为您提供了一个学习HTML的好冒险| CSS：http://jsfiddle.net/JjbJE/3/

float:left|right此属性执行并排技巧

clear:both此属性清除浮动属性

其他事情很容易学习，只需前往W3Schools

Answer 3

一种可能性是拥有一个居中的包装类并包含其中的除法：

<div class="wrapper">
  <header></header>
  <div id="middle">
    <div class="main-article clearfix"></div>
    <aside></aside>
  </div>
  <footer></footer>
</div>

然后设置样式，将包装器居中，将其放在一边和主文章：

.wrapper { width: 1024px; margin: 0 auto; /* the auto centers it */ }
header, footer, aside, { display: block; }
.main-article { width: 50%; float: right; }
aside { width: 50%; float: left; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

注意：这是未经测试的，并使用clearfix from the HTML5 Boilerplate。

更新01.22.2014：这款“圣杯布局”已由Flexbox解决。查看Solved By Flexbox以获取有关重新创建此布局的更多信息（以及更多内容）。

Answer 4

以下是关于转换为基于CSS的布局的总体概述 - 如果您有基于表格的布局，这是一个很好的计划 - 最后您可以做得更多，Google会更喜欢您，而且它会更酷。

我的策略是查看您网页上的所有内容。无论什么需要一起进入一个小组，放入一个div。为此div分配一个类和/或id来设置它的样式。如果div被分组，也将它们放在div中。

在您的情况下，您有两个内容块可以在div内部进行分组。将它们设计为您喜欢的尺寸和形状，背景，边框，无论需要什么。然后将它们组合在另一个div中，并将其居中。这和页面内容的其余部分可以放在容器div中，这将决定页面的宽度，对齐方式等。