Question

我正在使用div，我设法通过这个css来创建包装器中心：

.wrapper{
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
width:1100px;
height:100%;
}

然后我在里面漂浮了这个。它进去但我的问题是当它变得更长时，它通过包装div。当div内部的高度调整但是它不起作用时，包装div也应该调整。当我也浮动包装纸时，它也会调整，但它不再向中心移动。

.inside_div{
float:left;
margin:5px;
width:400px;
height:100%;
}

我尝试做的是浮动包装器div并使用：

margin-left:200px;

调整它并让它看起来在中心。但我把它放在笔记本电脑的屏幕上。它可能不会以不同尺寸的不同屏幕为中心。

我想看到的是包装div将在所有屏幕中居中，并且当div内部调整时也会调整。我只是不知道该怎么做。我尝试了不同的方法，但结果仍然相同。

这是html部分：

<html>
 <head>
  <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
 </head>
<body>
 <div class="header">
   <div class="logo">
   </div>
   <div class="menu">
   </div>
 </div>

 <div class="wrapper">
   <div class="inside_div">
   </div>
   <div class="inside_div2">
   </div>
 </div>

 <div class="footer">
 </div>

 </body>
</html>

inside_div2向右浮动。

Answer 1

浮动物体不会扩展他们的父母。您的初始css高度值是父容器必须为其高度引用的所有值。顺便说一句，高度：100％通常不适合你，很少你应该包括。

如果没有确切地看到你想要做什么，这可能会正常工作。虽然它取决于你在'inside_div'中的内容：

.wrapper {
  margin: 0 auto;
  width: 1100px;
  text-align: left;
}

.inside_div {
  display: inline-block;
  margin: 5px;
  width: 400px;
}

我假设你想把它放在左边，因为你把它漂浮了。但是如果你只想让它居中，你可以只删除你的浮点值并使用margin：0 auto;或者使用上面的css并将text-align更改为center。

编辑：好的，所以不得不重新检查上面的内容。我想你想要的只是这个：

.wrapper {
  width: 1100px;
  margin: 0 auto;
}

.inside_div {
  width: 400px;
  margin: 0 auto;
}

无论屏幕大小如何，这都会使两者都居中。如果需要，你可以为inside_div添加一个高度值，但是px值最好，如果你有内容，通常最好让内容决定高度而不明确设置它。

Answer 2

删除所有高度属性，并在包装器中添加“clearfix”类。

在你的css中，将“.clearfix”定义为：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

这应该适用于现代浏览器。你应该肯定谷歌“clearfix”来了解它的更多信息。

当具有float属性的div内部正在调整时，中心div不会调整

2 个答案: