Блог

Я застрял на некотором 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> 
  

До сих пор я понимал ваш вопрос, я дал 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 будут складываться друг с другом.

Демонстрация здесь