html - 响应式 div 在调整大小时覆盖其他内容

Question

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

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

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

您必须从 #pagewrapq 中删除 height: 300px。否则内容会很自然地在折叠时漂浮到下面的内容中，同时占用比这更多的空间。