#html #css
Вопрос:
У меня есть ряд дивов: ряд дивов
Когда я уменьшаю размер окна, они перемещаются вниз и укладываются друг на друга, дивы укладываются друг на друга, еще один
пример сложенных дивов
Вместо того, чтобы заставлять их двигаться вниз по одному по мере уменьшения размера окна, я хочу, чтобы они все вместе двигались вниз к следующей строке, например: как бы я хотел, чтобы отображались дивы
Как бы я сделал это с помощью divs? или, если есть другой метод (например, гибкие коробки), пожалуйста, дайте мне знать. Спасибо!
Вот весь соответствующий код:
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:white;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
CSS:
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
Ответ №1:
вам нужно рассмотреть несколько моментов
вам нужно сделать div отзывчивым на устройствах с небольшим экраном, добавив col-12 ранее col-md-6 .
если вы используете bootstrap, то изучите его хорошо, и вам не нужно использовать внутренний css.
замените это:
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
с этим:
<div class="col-12 col-md-6 pricing-boxes">
<div class="pricing-box"><h2><b>$1495</b></h2><h6>MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$1495</b></h2><h6>NON-MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$2000</b></h2><h6>VIPS</h6></div>
</div>
Ответ №2:
Используйте @media и когда размер экрана уменьшается до определенного размера, затем применитесь width: % к классу .pricing-boxes , как показано в приведенном ниже фрагменте.
Используйте отступы и поля в соответствии с потребностями
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
@media screen and (max-width: 900px) {/*Value may be from where it start stacking*/
.pricing-boxes{
width: 100%;
/*adjust padding and margin according to need*/
}
} <div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:black;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">MEMBERS</p>
</div>
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p>
</div>
<div class="pricing-box">
<p style="font-size:50px"><b>$2000</b></p>
<p style="font-size:23px; margin-top:-30px">VIPS</p>
</div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>