Question

我在div中有三个响应div。一切顺利，直到我调整大小，div将位于其下方的内容之上。

似乎正在发生的事情是我的响应式div下面的内容在页面调整大小时根本没有向下移动以补偿。我试过内联块，玩浮动和清除，溢出，似乎没有什么改变它。

JSFiddle https://jsfiddle.net/Qozmiq/mgh0yL78/

这一定是我想念的简单事。

CSS

#pagewrapq {
padding: 5px;
width: 98%;
height: 300px;
margin: 20px auto;
}
headerq {
height: 100px;
padding: 0 15px;
}
#contentq {
width: 345px;
display: inline-block;
padding: 5px 15px;
}

#middleq {
width: 345px; /* Account for margins + border values */
display: inline-block;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}

#sidebarq {
width: 345px;
padding: 5px 15px;
display: inline-block;
}



/* for 980px or less */
@media screen and (max-width: 980px) {

#pagewrap {
    width: 94%;
}
#content {
    width: 41%;
    padding: 1% 4%;
}
#middle {
    width: 41%;
    padding: 1% 4%;
    margin: 0px 0px 5px 5px;
    float: right;
}

#sidebar {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
}

header, footer {
    padding: 1% 4%;
}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

#contentq {
    width: auto;
    float: none;
}

#middleq {
    width: auto;
    float: none;
    margin-left: 0px;
}

#sidebarq {
    width: auto;
    float: none;
}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

headerq {
    height: auto;
}
h1q {
    font-size: 2em;
}
#sidebarq {
    display: none;
}

}


#contentq {
background: #f0efef;

}
#middleq {
background: #f0efef;

}
#sidebarq {
background: #f0efef;
}
headerq, #contentq, #middleq, #sidebarq {
margin-bottom: 5px;
}

HTML

<div id="pagewrapq">
<section id="contentq"><img class="displayed" title="Precision Engineering" alt="Precision Engineering" src="https://www.newvape.com/media/wysiwyg/calipers1.png" />
<h2 style="text-align: center;">Exceptional Engineering</h2>
<p>Function &amp; Style influence our engineering focus for our Domeless Nails, Enails, Dabbers, Grinders and Carb Caps. Having over 50 years of engineering and design experience allows us to create products that will last a lifetime. &nbsp;</p>
</section>
<section id="middleq"><img class="displayed" title="Made in the USA" alt="Made in the USA" src="https://www.newvape.com/media/wysiwyg/usa1.png" />
<h2 style="text-align: center;">US-Melted Metals</h2>
<p>We use only the finest US-melted metals. &nbsp;Whether it be our grade 2 titanium, 316 stainless steel, or 6061 Aluminum, only the finest materials go into our products. &nbsp;We start with the best, so we can create the best. &nbsp;</p>
</section>
<aside id="sidebarq"><img class="displayed" title="NewVape Quality" alt="NewVape Quality" src="https://www.newvape.com/media/wysiwyg/gear1.png" />
<h2 style="text-align: center;">Advanced Function</h2>
<p>Our vaporizer accessories are designed to optimize your experience to get the most out of your investment. &nbsp; Our Pax accessories let you extract more vapor, increase airflow, and adapt your vaporizer to work with a multiude of devices. &nbsp;</p>
</aside>
</div>
<div class="page-title category-title">
<h1>FEATURED PRODUCTS</h1>
<hr />
<h1>&nbsp;</h1>
</div>
<h3><span><strong><strong><a title="Pax 2 Replacement Screen" href="http://www.newvape.com/pax-accessory-screen-pax2-2732/"><img title="Pax 2 Replacement Screen" alt="Pax 2 Replacement Screen" src="https://www.newvape.com/media/wysiwyg/pax-2-screen-accessory-newvape.png" /></a>&nbsp; &nbsp;<a title="Domeless Combo Nail" href="http://www.newvape.com/domeless-nail-10-14-18mm-2424/"><img title="Domeless Nail - Combo 10mm 14mm 18mm" alt="Domeless Nail - Combo 10mm 14mm 18mm" src="https://www.newvape.com/media/wysiwyg/domeless-nail-newvape.png" /></a>&nbsp; &nbsp;<a title="Portable enail" href="http://www.newvape.com/enail-playmate-2723/"><img title="Domeless Nail - Combo 10mm 14mm 18mm" alt="Domeless Nail - Combo 10mm 14mm 18mm" src="https://www.newvape.com/media/wysiwyg/enail-newvape.png" /></a>&nbsp; &nbsp;<a title="3 inch Fine Grinder" href="http://www.newvape.com/fine-grinder-titanium-gray-2726/"><img title="Fine Grinder - NewVape" alt="Fine Grinder - NewVape" src="https://www.newvape.com/media/wysiwyg/3-inch-fine-grinder-newvape.png" /></a></strong></strong></span></h3>

Answer 1

您必须从height: 300px中删除#pagewrapq。否则，内容将很自然地在崩溃时浮动到下面的内容中，同时占用更多的空间。

Answer 2

您的#pagewrapq{height:300px;}似乎导致了问题。如果您在实时测试中看到元素并取消选择此css属性，则在调整窗口大小时，您将根据需要看到页面显示。

你需要这个吗？或者你可以用@media包装一个覆盖属性。因此，当页面的大小调整到某个数字以下时，高度会变为height:100%

就像尝试将它放在CSS文件中一样：

@media screen and (max-width: 1184px) {
    #pagewrapq {
        height:100%;
    }
}

Answer 3

如果需要，您可以保留#pagewrapq高度。

尝试在你的pagewrapq Id中添加一个display：inline-table，它应该修复它

#pagewrapq {
    padding: 5px;
    width: 98%;
    height: 300px;
    margin: 20px auto;
    display: inline-table;
}

Answer 4

删除height: 300px;或将其更改为min-height: 300px;中的#pagewrapq。

Answer 5

不要给出300px的固定高度，这就是为什么其他内容互相溢出的原因，如果你移除它为你完成的高度

所以从 #pagewrapq 中删除高度，将其命名为：

#pagewrapq
{
height:auto;
}

响应式div包含调整大小的其他内容

5 个答案: