html - 响应式设计的自动填充

标签 html css text responsive-design responsive

在我创建的网站主页上，我将文本元素“新闻和公告”显示在移动设备上的“近期事件”下方。然而，这些文本总是在变化，因此我为在元素之间放置空间而建立的填充永远不会是一个固定的数字。例如，目前“News and Announcements”文本很长，所以它没有足够的填充并且与“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; 
    }
}

}

最佳答案

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

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

然后您就可以将#insert-1 向左浮动，将#insert-2 向右浮动。之后，您需要清除两列的 float 。 (有关 float 和清除它们的更多信息，请参阅 https://css-tricks.com/all-about-floats/ )。在这种情况下，最简单的方法是将 overflow:hidden 添加到父容器，在这种情况下是#content-2。

关于html - 响应式设计的自动填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40076421/

上一篇：html - 固定在容器边缘的背景图像

下一篇：javascript - 基于父 CSS 状态的条件子动画(带有用于 React 的样式化组件)

相关文章：

javascript - innerHTML 不显示文本

javascript - 如果 child 有类(class)，则选择 child 的 parent

java - NumberFormat 解析货币值失败

Javascript，动态表将选项框插入表中

javascript - 如何使用 JavaScript 在同一页面中显示包含名字、姓氏、电子邮件和密码验证的表单数据

javascript - JQuery展开页面上的所有div

html - 中心背景图片

javascript - 如何在javascript中将一个div的背景应用到另一个div

java - Weka StringToWordVector 过滤器 - Java 中的实现

php - 如何向文件 php 添加附加文本

©2024 IT工具网  联系我们