代码之家 › 专栏 › 技术社区 › learningbyexample

如何将div并排放置?

css html

-1

learningbyexample · 技术社区 · 9 年前

我想做的是将div放置在彼此相邻的位置,而不是它们如何堆叠在一起。

旁注:

我希望div并排,但从屏幕的右上角开始,根据屏幕大小添加新的列表div或删除一些,但始终在屏幕顶部从右到左开始div。

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>

1 回复 | 直到 9 年前

David Saginashvili 9 年前

给 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;
}

推荐文章