반응 형 디자인을위한 자동 여백

Question

내가 만든 웹 사이트의 홈 페이지에서 "News and Announcements"텍스트 요소를 휴대 기기의 "다가오는 이벤트"아래에 표시했습니다. 그러나이 텍스트는 항상 변경되므로 요소 사이에 공백을 넣기 위해 설정 한 패딩은 결코 정해진 숫자가 될 수 없습니다. 예를 들어, 현재 "뉴스 및 공지 사항"텍스트는 매우 길기 때문에 "다가오는 이벤트"와 충분한 겹치기 및 겹침이 없습니다. 현재, 더 많은 패딩이 필요할 때마다 중단 점에서 미디어 쿼리를 설정했습니다. 그러나이 작업은 웹 사이트가 업데이트 될 때마다 변경되어야하므로 매우 지루할 수 있습니다. 이 패딩을 자동화하는 방법이 없으므로 텍스트가 추가 될 때마다 다르게 설정됩니다.

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을 왼쪽으로 떠서 float # insert-2를 오른쪽으로 떠있을 수 있습니다. 그 후 두 열의 수레를 지우고 싶습니다. 수레 및 지우기에 대한 자세한 내용은 https://css-tricks.com/all-about-floats/을 참조하십시오. 이 경우 가장 쉬운 방법은 parent 컨테이너에 overflow : hidden을 추가하는 것입니다.이 경우 parent는 # content-2입니다.