响应式设计的自动填充

Question

在我创建的网站的主页上，我将文本元素“新闻和公告”显示在移动设备上的“即将发生的事件”下。然而，这些文本总是在变化，因此我为在元素之间放置空间而建立的填充永远不能是一个设定的数字。例如，目前“News and Announcements”文本很长，因此它没有足够的padding 并与“Upcoming Events”重叠。目前，每次需要更多填充时，我都会在断点处设置媒体查询。但是，每次更新网站时都必须更改此设置，这将非常繁琐。有什么方法可以自动填充这种填充，以便每次添加更多或更少的文本时它的设置都不同？

http://codepen.io/caguilera0001/pen/ALPojE

（注意：我的网站有一个flexslider，但它没有出现在codepen中）

HTML

<div id="contentTwo">

<div id="insert1">

<div id="insert1_title">
News and Announcements 
</div><!-- end title -->

<div id="insert1_textblock">

<div id="insert1_text">
<div id="link"><a>eChoices Application period opens October 4th!!</a></div>
<!-- end link -->
<div id="description">The eChoices application period opens on October 4th and ends on November 10th at 5:00pm. Please visit: <a href="http://echoices.lausd.net" target="new">echoices.lausd.net</a> to apply.</div>
<!-- end description -->  
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert1_text">
<div id="link"><a>October is the College &amp; Career Month</a></div>
<!-- end link -->
<div id="description">Bancroft will be highlighting this month with activities, trivia,  and information. All 7th and 8th grade students will be taking the PSAT on 10/19/2016.</div>
<!-- end description -->  
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert1_text">
<div id="link"><a>PHBAO Conferences scheduled for Thursday October 20th 5-7 pm</a></div>
<!-- end link -->
<div id="description">We are half-way through the Fall semester! Parent-Teacher conference night is coming. Report cards will be handed out from 4-6 pm. Teachers are available to meet with parents from 5-7 pm. Please focus on meeting with teachers if your child is struggling (C-D-Fail-U) in a class</div>
<!-- end description -->  
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert1_text">
<div id="link"><a>Annual Title I Meeting scheduled for Thursday October 20th 7 pm</a></div>
<!-- end link -->
<div id="description">The Every Child Succeeds Act  requires that  parents be informed about their rights under the Title I Program and how to become involved in improving the school's Title I program, including development and evaluation of the school's parent involvement policy.</div>
<!-- end description -->  
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert1_text">
<div id="link"><a>There is still space in our STE[+a]M and Performing Arts Magnets for Spring Semester!</a><a href="magnet_tour_2016.html" target="new"></a></div>
<!-- end link -->
<div id="description">Are you looking for a school that will challenge your child while engaging them in the arts (art, dance, music, theatre) or engineering (Project Lead the Way Gateway curriculum)? All students participate in our International Baccalaureate Programme which includes a world language (Mandarin or Spanish) every year. Come visit us!</div>
<!-- end description --> 
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert1_text">
<div id="link"><a href="magnet_tour_2016.html" target="new">Magnet Tour Dates Announced!</a></div>
<!-- end link -->
<div id="description">Come visit us and see our STE[+a]M and Performing Arts Magnets! Click the title above for a link to dates and more information on our Magnet Tours.</div>
<!-- end description --> 
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert1_text">
<div id="link"><a href="magnet_tour_2016.html" target="new">Bancroft's Title IX Complaint Managers</a></div>
<!-- end link -->
<div id="description">
  <p style="margin: 0;">Counselor Aldana: 1-323-933-3407 <a href="mailto:ealdan1@lausd.net" target="new"> Send Email</a> </p>
  <p style="margin: 0;">Counselor Llamas: 1-323-993-3407 <a href="mailto:mxl5422@lausd.net"> Send Email</a></p>
  <p style="margin: 0;">For the District's Title IX Sex Based Nondiscrimination Statute <a href="" target="new">Click here. </a></p>
<!-- that link was a bit.ly shortened link, but stackoverflow didn't want those types of links -->
</div>
<!-- end description --> 
<hr noshade="noshade" />
</div><!-- end text -->



</div><!-- end insert1 text block --> 
</div><!-- end insert 1 -->

<div id="insert2">

<div id="insert2_title">
Upcoming Events
</div><!-- end title -->

<div id="insert2_textblock">

<div id="insert2_text">
<div id="link">
  <div id="insert2_text2">
    <div id="link2"><a>School Site Council Meeting</a></div>
    <!-- end link -->
    <div id="description2">
      <p style="margin: 0;">Date: 10/18/2016, 3:30 pm </p>
      <p style="margin: 0;">Location: School Library </p>
    </div>
    <!-- end description -->
    <hr noshade="noshade" />
  </div>
  <a>PSAT Test Day </a></div>
<!-- end link -->
<div id="description">
  <p style="margin: 0;">Date: 10/19/2016, 8 am - 12 noon</p>
</div>
<!-- end description -->  
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert2_text">
<div id="link"><a>PHBAO Parent-Teacher Conferences</a></div>
<!-- end link -->
<div id="description">
  <p style="margin: 0;">Date: 10/20/2016, 5-7 p.m </p>
</div>
<!-- end description -->  
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert2_text">
<div id="link"><a>Minimum Day - school ends at 12:45 pm</a></div>
<!-- end link -->
<div id="description">
  <p style="margin: 0;">Date: 10/21/2016 - school buses leave at 3:00 pm</p>
</div>
<!-- end description -->  
<hr noshade="noshade" />
</div><!-- end text -->

<div id="insert2_text">
<div id="link"><a>Magnet Tour</a></div>
<!-- end link -->
<div id="description">
  <p style="margin: 0;">Date: 10/26/2016, 10:30 a.m</p>
</div>
<!-- end description -->  
<hr noshade="noshade" />
</div><!-- end text -->

<div id="feature">
<a href="http://bancroftmiddleschool.org/BancroftTours.html"target="new">Virtual Tour</a>

<div id="feature-content" style="text-decoration:none"> Never seen the Bancroft Campus? Click the title above for a virtual tour!</div><!-- end feature content--->

</div><!-- end feature -->

<!-- video html & css should be in index copies---> 

</div><!-- end text block --> 

</div><!-- end insert2 -->

</div><!-- content 2 --> 

CSS

#contentTwo   {
    height: 550px;
    width: 100%;
    background-color: #D9D9D9;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    margin: 0;
    padding: 0;
}
#insert2 {
    float: right;
    height: 100%;
    width: 28%;
    padding-right: 70px;
}

#contentTwo #insert1 {
    height: 100%;
    width: 53%; 
    padding-left: 122px;
    float: left;
}

#contentTwo #insert1 #insert1_textblock {
    padding: 5px;
    height: 500px;
    color: #FFF;
}
#container #main #contentTwo #insert2 #insert2_textblock {
    padding: 5px;
    height: 510px;
}
#container #main #contentTwo #insert1 p {
    padding: 10px;
    margin: 0px;
}

#contentTwo #insert1 #insert1_title {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    margin: 10px;
    text-align: center;
}

#contentTwo #insert2 #insert2_title {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    margin: 10px;
    text-align: center;
}
#container #main #contentTwo #insert1 #insert1_text {
    margin: 5px;
    color: #465C8B;
}
#contentTwo #insert1 #insert1_textblock #insert1_text #link a {
    color: #465C8B;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}
#insert2 #insert2_textblock #insert2_text {
    margin: 10px;
    color: #465C8B;
}
#contentTwo #insert2 #insert2_textblock #insert2_text #link a {
    color: #465C8B;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}

#contentTwo #insert1 #insert1_text #description {
    color: #465C8B;
}

@media only screen and (max-width : 1010px){

#contentTwo   {
    height: 100%;
    background-color: #D9D9D9;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    clear: both;
}

#insert2 {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0px;
    clear: both;
}

#contentTwo #insert1 {
    height: 100%;
    width: 100%; 
    padding: 0;
    margin: 20px;
    clear: both;
}

#contentTwo #insert1 #insert1_text #description {
    padding-right: 20px;
}

@media only screen and (max-width : 800px){
    #insert2{
        padding-top: 50px;  
    }
}

@media only screen and (max-width : 735px){
    #insert2{
        padding-top: 100px; 
    }
}

@media only screen and (max-width : 560px){
    #insert2{
        padding-top: 150px; 
    }
}

@media only screen and (max-width : 510px){
    #insert2{
        padding-top: 200px; 
    }
}

@media only screen and (max-width : 460px){
    #insert2{
        padding-top: 250px; 
    }
}

@media only screen and (max-width : 422px){
    #insert2{
        padding-top: 350px; 
    }
}

@media only screen and (max-width : 360px){
    #insert2{
        padding-top: 450px; 
    }
}

@media only screen and (max-width : 338px){
    #insert2{
        padding-top: 550px; 
    }
}

@media only screen and (max-width : 280px){
    #insert2{
        padding-top: 650px; 
    }
}

@media only screen and (max-width : 250px){
    #insert2{
        padding-top: 750px; 
    }
}

}

Answer 1

div 上基于像素的高度不是必需的；一旦你摆脱了这些，垂直填充也将不是必需的。 CSS 只会自行堆叠你的东西。

编辑：所以：从#contentTwo、#contentTwo #insert1 #insert1_textblock、#container #main #contentTwo #insert2 #insert2_textblock 中删除您的高度声明。这样，您的 div 将自动堆叠高度而不是基于像素的声明，这意味着它们不会相互重叠。

然后您将能够向左浮动#insert-1 并向右浮动#insert-2。之后，您需要清除这两列的浮动。 （有关浮动和清除它们的更多信息，请参阅https://css-tricks.com/all-about-floats/）。在这种情况下，最简单的方法是将溢出：隐藏添加到父容器，在这种情况下是#content-2。