Плавающие 4 элемента влево и вправо в порядке - PullRequest
Новая
       16

Плавающие 4 элемента влево и вправо в порядке

0 голосов
/ 24 марта 2020

У меня проблема при настройке навигации в заказе. У меня есть 4 тега div, и они должны быть в следующем порядке: слева, справа, справа, слева. поэтому я ожидаю, что моя навигация должна выглядеть следующим образом expectation

У меня проблема с плавающей точкой справа. Я пробовал это 

.footer {

}

li {
  background-color: yellow;
  display: inline-block;
}

.one {
  background-color: orange;
}

.two {

}

.copy {
  background-color: blue;
}

.two, .three {
  float: right;
  background-color: aqua;
  clear: right;
}
<html>
  <body>
    <footer class="footer">
      <div class="one" >
        <img src="https://via.placeholder.com/250x100" alt="footer" />
      </div>
      <div class="two">
        <ul>
          <li>privacy</li>
          <li>terms and conditions</li>
          <li>contact us</li>
        </ul>
      </div>
      <div class="three">
        <ul>
          <li>instagram</li>
          <li>facebook</li>
          <li>twitter</li>
      </div>
      <div class="clear"></div>
      <div class="copy">
        &copy; 2020 mysite.com
      </div>
    </footer>
  </body>
</html>

почему-то float не удерживает мой неупорядоченный список наверху. Я искал через переполнение стека. но я не мог найти ответ. Будет более полезно, если я получу эту работу.

1 Ответ

1 голос
/ 24 марта 2020

Если без изменений структура div, просто используйте display:gird

.footer {
    display: grid;
    grid-template-columns: 1fr auto;
}

li {
  background-color: yellow;
  display: inline-block;
}

.one {
  grid-area: 1 / 1 / 3 / 2;
  background-color: orange;
}

.two {
  grid-area: 1 / 2 / 2 / 3;
}

.three {
  grid-area: 2 / 2 / 3 / 3;
}

.two, .three {
  background-color: aqua;
  text-align: right;
}

.copy {
  grid-area: 3 / 1 / 4 / 2;
  background-color: blue;
}
<html>
  <body>
    <footer class="footer">
      <div class="one" >
        <img src="https://via.placeholder.com/250x100" alt="footer" />
      </div>
      <div class="two">
        <ul>
          <li>privacy</li>
          <li>terms and conditions</li>
          <li>contact us</li>
        </ul>
      </div>
      <div class="three">
        <ul>
          <li>instagram</li>
          <li>facebook</li>
          <li>twitter</li>
      </div>
      <div class="copy">
        &copy; 2020 mysite.com
      </div>
    </footer>
  </body>
</html>
...