Question

我有一个带有多个子div的父div，所以我需要将两个孩子的div放在一起两个：

＆＃13;

.parent ul li {
  width: 50%;
}

＆＃13;

<div class="parentDiv">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

＆＃13;

我该怎么办？

Answer 1

将CSS中的.parent更改为.parentDiv。然后添加float: left;。这是jsbin。

Answer 2

您需要为父容器指定宽度。然后，您可以float左侧的列表项。考虑给他们一个height或max-height，让他们始终正确对齐。也可以在父容器上使用clear，以防止列表后面有浮动元素。

HTML：

<div class="parent">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

的CSS：

.parent {
    width: 300px;
    clear: both;
}

.parent ul li {
    width: 50%;
    float: left;
    height: 50px;
}

选中此fiddle

Answer 3

你应该只在你的代码中添加float：left。

＆＃13;

.parentDiv ul li {
  width: 50%;
  float: left;
}

＆＃13;

<div class="parentDiv">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

＆＃13;

Answer 4

您可以使用float，inline-block甚至flex：

.parent ul, .parent li { /* reset and float minding */
  padding:0;
  margin:0;
  list-style-type:none;
  overflow:hidden;
  }
.parent ul li {
  width: 50%;
  background: lightblue;
}
.parent ul li:nth-child(odd) {
  float: left;
  background: turquoise;
}

<div class="parent">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

内联块：

.parent ul,
.parent li {
  /* reset */
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 0.01px;
  /* avoid white space at screen from code indentation */
}
.parent ul li {
  display: inline-block;
  font-size: 1rem;
  width: 50%;
  background: lightblue;
}
.parent ul li:nth-child(odd) {
  background: turquoise;
}

<div class="parent">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

挠曲：

.parent ul {
  /* reset */
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.parent ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.parent ul li {
  width: 50%;
  background: lightblue;
}
.parent ul li:nth-child(odd) {
  background: turquoise;
}

<div class="parent">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

单个div中的双列

4 个答案: