响应式设计的自动填充

Question

在我创建的网站的主页上，我在移动设备上的“即将发生的事件”下显示了“新闻和通知”文本元素。但是，这些文本总是在变化，因此我建立的用于在元素之间放置空格的填充永远不会是设定的数字。例如，目前“新闻和公告”文本很长，因此它没有足够的填充和“即将发生的事件”重叠。目前，每次需要更多填充时，我都会在断点处设置媒体查询。但是，每次更新网站时都必须更改，这将非常繁琐。有没有办法自动化这个填充，所以每次添加或多或少的文本时它都会有不同的设置？

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/）。在这种情况下，最简单的方法是在父容器中添加overflow：hidden，在本例中为＃content-2。