Question

我似乎无法解决为什么我的两个div不以页面为中心的问题。我知道这是因为漂浮：左。但对于我的生活，我无法弄清楚如何解决问题。有人可以帮忙吗？

这是我的HTML：

<body>
<div align="center">  
<div id="left" class="left">
Left box needs to be on left of of white box
</div>

<div id="content" class="content">
Right box needs to be on the right side of red box
</div>

</div>    
</body>

这是我的CSS：

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

body {
  font-family: Arial, sans-serif;
  background: #006699;
}

.content{
  width: 300px;
  float: left;
  background: #ffffff;
  height: 300px;
 }

.left{
  background: none repeat scroll 0 0 red;
  float: left;
  height: 300px;
  width: 300px;
 }

我知道浮动：左;导致问题，但我不知道如何解决它。

感谢。

Answer 1

将它们包装在设置宽度为margin: 0 auto;的div中...例如，将顶级div从align="center"更改为class="center"（或id而不是class）然后执行：

.center {
  width: 600px;
  margin: 0 auto;
}

align属性不会影响块级元素的对齐，而是影响其内部元素的对齐。你的div不是。

如何集中网页内容

1 个答案: