#html #css
#HTML #css
Вопрос:
Я застрял на некотором css-кодировании для простых divs. У меня есть внешний div с двумя внутренними подразделениями. Я перемещаю 2 внутренних раздела, поэтому, когда ширина экрана становится ниже 1200 пикселей, 2 внутренних раздела находятся друг над другом. Все это прекрасно и то, что я хочу. Проблема, с которой я сталкиваюсь, заключается в том, что когда экран меньше 1200 пикселей, а 2 внутренних раздела находятся друг над другом, внешний div все еще находится на 100% от ширины экрана. Я не хочу этого, но хочу, чтобы внешний div уменьшался, чтобы всегда быть шириной внутренних divs. Я много чего перепробовал, но безуспешно. Спасибо — вот мой код.
<style type="text/css">
#Panel {
float: left;
background: #3CA6F0;
padding: 10px;
}
</style>
<div id="Panel">
<div style="width: 600px; display:inline-block; background-color: #eee;">1</div>
<div style="width: 600px; display:inline-block; background-color: #eee;">2</div>
</div>
Комментарии:
1. Можете ли вы создать codepen или jsfiddle, который представляет вашу проблему?
2. jsfiddle.net/A43g9 вы можете увидеть мою проблему только тогда, когда сведете экран к минимуму
Ответ №1:
До сих пор я понимал ваш вопрос, я дал div
s внутри #Panel
свойств css of float: left
и a width
of 50%
.
#Panel {
background: #3CA6F0;
}
#Panel > div {
width: 50%;
background: #ddd;
float: left;
}
Это заставляет их плавать рядом друг с другом.
Редактировать
С этим фрагментом кода под ним:
@media only screen and (max-width: 768px) {
#Panel > div {
width: 100%;
}
2 div
s будут складываться друг с другом.
Комментарии:
1. Спасибо, но я хотел сохранить свой оригинальный css и для внутренних разделов
2. я хочу, чтобы внутренние div вели себя так, как сейчас — бок о бок на больших экранах, но друг над другом на меньших экранах. Моя проблема в том, что внешний div остается на ширине экрана, когда внутренние 2 находятся друг над другом на меньших экранах, и я хочу, чтобы внешний div был только шириной внутреннего div.
3. О, хорошо, я сделаю это, когда вернусь домой 🙂