Как получить этот div с float отзывчивым?

Question

Я сделал небольшое html-поле и теперь пытаюсь сделать его отзывчивым.Чтобы было понятно, я нарисовал, как должны двигаться поля, когда они отображаются на меньшем экране. Как должно быть

После нескольких часов работы я получил это решение, которое отлично работает на рабочем столе, но не на меньшем экране.Логотип не движется вверх, но остается с левой стороны.

Может кто-нибудь помочь мне с этим?

Вот код:

    <div style="background-color: orange; color: white; width: 30%; padding: 4px 4px; text-align: center; margin:0">Stackoverflow</div>
<div style="background-color: #f9f9f9; border: 2px solid orange; max-width:800px; overflow: auto;">
    <div style="float: left;width: 30%; overflow: auto;"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7A3wAuudoXw8butMA-wxJdWYdUlNbWjC6EOV3iXnrUf08dwX3PA" /></div>
    <div style="float:left;width:70%">
            <div style="text-align: center; font-size: 12pt; background-color:lightgreen">Some Informations
            </div>  
            <div>     
              <div style="float: left; background-color: lightblue; width:50%">
                  <ul>
                <li>Owner: Stack Exchange, Inc.</li>
                <li>Available in: Englisch, Spanisch, Russian, Portuguese ...</li>
                <li>Type of site: Knowledge markets</li>
              </ul> 
          </div>
          <div style="float: right; background-color: lightgrey; width:50%; padding:5px">
              <ul>
                <li>Website: stackoverflow.com</li>
                <li>Commercial: Yes</li>
                <li>Registration: Optional</li>
              </ul>

            <div style="float: left; width: auto; background-color:yellow">Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on a wide range of topics in computer programming.
            </div>
            <div style="clear:both;text-align: center;"><a href="https://www.stockoverflow.com"> <input type="button" value="Go to the Website" /></a>
            </div>

    </div>
</div>

Answer 1

Спасибо, ребята, я сделал решение из ваших ответов. Я сделал это с дисплеем: flex, flex-wrap: wrap и @ media.

Для этого я разделил все «тело коробки» на контейнер с логотипом и контейнер с текстовыми полями (почти как раньше) и дал оба атрибута flex. В текстовых полях я использовал float (как и раньше).

Для экранов меньшего размера я изменил flex-direction на столбец, и теперь он работает так, как я хотел.

Answer 2

Нельзя реагировать на встроенные стили.Разделяя ваши стили, вы можете использовать @media запросы для стилей элементов на основе размера экрана

* {
    box-sizing: border-box;
}
.tab {
  background-color: orange;
  color: white;
  width: 30%;
  padding: 4px 4px;
  text-align: center;
  margin: 0
}

.wrapper {
  background-color: #f9f9f9;
  border: 2px solid orange;
  max-width: 800px;
  overflow: auto;
}

.logo {
  text-align: center;
}
@media (min-width: 640px) {
  .logo {
    float: left;
    width: 30%;
    overflow: auto;
  }
  .main {
    float: left;
    width: 70%
  }
}

.row:before,
.row:after {
    display: table;
    content: " ";
}

.row:after {
    clear: both;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: 5px;
}

.col {
  margin: 0 5px;
  width: calc(50% - 10px);
}

.col-left {
  float: left;
  background-color: lightblue;
}

.col-right {
  float: right;
  background-color: lightgrey;
  padding: 5px
}

.highlight {
  float: none;
  width: auto;
  background-color: yellow;
  margin-bottom: 10px;
}

<div class="tab">Stackoverflow</div>
<div class="wrapper">
  <div class="logo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR7A3wAuudoXw8butMA-wxJdWYdUlNbWjC6EOV3iXnrUf08dwX3PA" /></div>
  <div class="main">
    <div style="text-align: center; font-size: 12pt; background-color:lightgreen">Some Informations
    </div>
    <div class="row">
      <div class="col col-left">
        <ul>
          <li>Owner: Stack Exchange, Inc.</li>
          <li>Available in: Englisch, Spanisch, Russian, Portuguese ...</li>
          <li>Type of site: Knowledge markets</li>
        </ul>
      </div>
      <div class="col col-right">
        <ul>
          <li>Website: stackoverflow.com</li>
          <li>Commercial: Yes</li>
          <li>Registration: Optional</li>
        </ul>
      </div>
    </div>
    <div class="highlight">Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network, created in 2008 by Jeff Atwood and Joel Spolsky. It features questions and answers on a wide range of topics in computer programming.
    </div>
    <div style="clear:both;text-align: center;">
      <a href="https://www.stockoverflow.com"> <input type="button" value="Go to the Website" /></a>
    </div>

  </div>
  <!-- /.main -->
</div>
<!-- /.wrapper -->

Answer 3

Ваша HTML структура не так уж и плоха, даже если будет лучше, если ваш код стиля будет внутри .css файла, если это так, попробуйте.

В любом случае, в вашей мобильной структуре у вас есть 3 основных контейнера, я буду называть:

• основной контейнер
  • изображение-контейнер
  • содержание

Ваш основной контейнер содержит image-container и содержимое внутри, но оба имеют злодея, в вашем случае это float: left , эта вещь установит все, что должно быть слева от них и окружающих их объектов.

Я предлагаю вам изменить float: left и начать работать с Дисплей: flex , вы можете найти тонны информации в Интернете об этом, чтобы помочь вам построить очень полированные структуры, которые будут подчиняться любому правилу, которое вы им построите.

Answer 4

Чтобы изменить стили в соответствии с разрешением экрана, вы можете использовать media query

@media (max-width: 1024px) { 
   .logo{
      width: 100%;
   }
}

Добавить классы к вашим элементам, чтобы иметь возможность нацеливать их по определенным правилам CSS:

<div style="float: left;width: 30%; overflow: auto;">

Становится

<div class = "logo">
...
<style>
    .logo{
      float: left;
      width: 30%;
      overflow: auto;
    }
</style>