Принудительное завершение второго Div после первого Div, когда браузер отвечает - PullRequest
Новая
       43

Принудительное завершение второго Div после первого Div, когда браузер отвечает

0 голосов
/ 11 января 2019

У меня есть две основные <divs> на странице индекса этого сайта:

http://htmlmesomething.drawyourpets.com/

Я пытаюсь сделать так, чтобы второй контейнер / div (и его содержимое) разрушался под содержимым первого div в планшетах и ​​мобильных устройствах.

HTML 

<div class="container_one">

<section id="column_one">
    <h1>Bruce</h1>
    <img src="images/bruce.jpg"/>
    <p>Bruce was a red tailed black shark who died from accidental poisoning.
         We were given bad instructions from a store owner on how to properly use cleaning
          solution for his aquarium, and the rapid increase in PH levels caused Bruce to 
         suffocate within minutes.</p>
</section>

<section id="column_two">
    <h1>Captain</h1>
    <img src="images/captain.jpg"/>
    <p>Captain was a yellow lab who died from congestive heart failure. He 
        had been on medication for his condition, and it had likely kept him alive
         for years, until eventually he became too obese for the medication to take effect,
        and he died suddenly.
         </p>
</section>

<section id="column_three">
    <h1>Tigger</h1>
    <img src="images/tigger.jpg"/>
    <p>Tigger was a red Tabby cat who struggled with obesity. He died on Christmas
        when a blood clot to the brain caused him to collapse and have a siezure.</p>
</section>

</div><!--ends first container-->

<div class="container_two">

<section id="solo_column">
    <img id="slip" onmouseover="this.src='images/slip2.jpg'" onmouseout="this.src='images/slip1.jpg'" height="100px" width="100px" src="images/slip1.jpg">
</section>

</div><!--ends second container-->

CSS ( DEKSTOP ) 

.container_one {
padding: 5px;
width: 960px;
height:340px;
margin: 20px auto;
}

.container_two {
padding: 5px;
width: 960px;
height:340px;
margin: 20px auto;
}

#column_one {
width: 290px;
float: left;
padding: 20px 15px;
text-align:center;
background-color:#E8E6E6;
border: solid 1px grey;
}

#column_two {
width: 294px; /*Account for margins, border values*/
float: left;
padding: 20px 15px; 
margin: 0px 5px 5px 5px;
text-align:center;
background-color:#E8E6E6;
border: solid 1px grey;
}

#column_three {
width: 270px;
float: left;
padding: 20px 15px;
text-align:center;
background-color:#E8E6E6;
border: solid 1px grey;
}

#solo_column {
width: 100%;
float: none;
padding: 20px 15px;
text-align:center;
}

.footer_info {
text-align:center;
margin-top:35px;
}

CSS (ПЛАНШЕТ) : 

/*980px or less*/
@media screen and (max-width: 980px) {

div, section {
    display:block;
    height:320px
}

.container_one {
    width: 94%;
}

.container_two {
    width: 94%;
    clear:both;
    float: right;
}

#column_one {
    width: 41%;
    padding: 1% 4%;
    height: 355px;
}

#column_two {
    width: 41%;
    padding: 1% 4%;
    margin: 0px 0px 12px 5px;
    float: right;
    height: 355px;
}

#column_three {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
}

header, footer {
    padding: 1% 4%;
}
article {
    margin-top:50px;
}   
footer, .footer_info {
    clear:both;
    margin-top:205px;
}
}

CSS (ПЛАНШЕТ) 

/* for 600px or less */
@media screen and (max-width: 600px) {

#column_one {
    width: auto;
    float: none;
    margin-bottom: 12px;
}

#column_two {
    width: auto;
    float: none;
    margin-left: 0px;
}

#column_three {
    width: auto;
    float: none;
}

#solo_column {
    width: auto;
    float: none;
}

footer, .footer_info {
    clear:both;
    margin-top:405px!important;
}

.container_two {
    clear:both;
    float: right;
}

}

CSS (МОБИЛЬНЫЙ) 

/*for 480px or less*/
@media screen and (max-width: 480px) {

#column_one {
    height: 385px;
}
#column_two {
    height: 385px;
}
#column_three {
    height: 385px;
}
#solo_column {
    height: 385px;
}
h1 {
    font-size: 2em;
}
footer .footer_info {
    clear:both;
    margin-top:500px!important;
}

.container_two {
    clear:both;
    float: right;
}

}

Я пытался добавить clear:both в класс container_two.

Я не добавил это правило в класс при размере рабочего стола, потому что оно уже отображается под другим <div>.

Как я могу получить эту секунду <div> до clear или свернуть ниже первой <div> для планшетов и мобильных устройств?

EDIT : Попытка добавить float: right к .container_two div классам.

enter image description here

EDIT 2 : также попытался добавить <div style="clear: both;"></div> в HTML после первого <div>.

1 Ответ

0 голосов
/ 11 января 2019

Ключом было удалить высоту из .container_one и добавить вместо нее height: initial. Не ставьте статические высоты на что-либо.

Когда вы устанавливаете высоту на контейнере, но затем перемещаете его дочерние элементы, это приведет к их разливу за пределы контейнера. Когда вы перемещаете div, он фактически «отсоединяет» его от остальных элементов DOM, и буквально буквально помещает их сверху и избавляется от вычисленного пространства, которое эти элементы заняли бы.

В будущем избегайте поплавков и используйте вместо этого flexbox.

Управлять столбцами с помощью flexbox намного проще, а когда вы поэкспериментируете с ним, его проще реализовать.

РЕДАКТИРОВАТЬ : я также назначил максимальную высоту 30px для контейнера <div> в нижнем колонтитуле (максимальная высота делает его таким, чтобы высота не превышала 30 пикселей).

...