Question

我想创建一个名为'container'的div，它包含页面上的所有其他元素。

如果我改变大小，元素移动并重新排列，-BUT- div本身仍然是隐形的！使用Firefox检查器，似乎div是 - 上面的页面。

对我来说这似乎很奇怪，因为div都是正确嵌套的，否则表现得很好。

我唯一的猜测是这一点造成了一些麻烦;如果我改变宽度，我的布局会变得疯狂。

#upper {
float: left;
width: 100%;
height: 40%;
}

#lower {
float: left;
width: 100%;
height: 40%;
}

但是，我无法确定导致问题的原因。有什么想法吗？

这是我的代码：https://jsfiddle.net/xtaLfuLa/

Answer 1

我只想添加display：inline-block;进入集装箱班。

 #container {
    width: 80%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    background: rgb(163, 43, 43);
    border-radius: 20px;
    background: red;
    display:inline-block;
}

Answer 2

这种情况正在发生，因为您将#upper和#lower浮动到左侧。您需要清除父容器上的浮动。这通常使用clearfix类来完成。将以下类添加到父容器中。

.clearfix {
  overflow: auto;
  zoom: 1;
}

https://jsfiddle.net/xtaLfuLa/3/

在此处了解详情：http://learnlayout.com/clearfix.html

Answer 3

不清楚您在寻找什么（共享图像布局），但您需要编写响应式布局的代码。做到这一点

 #results{
   margin-left:0; 
}

用于较小的设备，并将其添加到带有媒体查询的大型设备中。

CSS DIV奇怪的行为

3 个答案: