Блог

Что я хочу сделать, так это разместить divs рядом друг с другом, а не так, как они складываются друг на друга.

примечание сбоку:

Я хочу, чтобы divs были рядом, но начинались с верхнего правого края экрана, добавляя новый список div или удаляя некоторые в зависимости от размера экрана, но всегда запускать divs справа налево в верхней части экрана.

 li {
  list-style-type: none;
  padding: 0;
  margin: 0;
} 

 <div class="lists1">
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
  </ul>
</div>
<div class="lists2">
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
  </ul>
</div>
<div class="lists3">
  <ul>
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
    <li>option 4</li>
  </ul>
</div> 

Дайте div контейнерам один и тот же класс и добавьте float:right к ним в CSS вот так: https://jsfiddle.net/q6c34sqk/1 /

РЕДАКТИРОВАТЬ: для более элегантного решения используйте Flexbox: https://jsfiddle.net/q6c34sqk/2 /

 <div class="main-contain">
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 9</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
    </ul>
  </div>
  <div class="lists">
    <ul>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 7</li>
    </ul>
  </div>
</div>
 

CSS

 li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.main-contain{
  display: flex;
  justify-content: flex-end;
}

.lists {
  display: inline-block;
}