html - 根据错误的元素向右浮动

Question

我有一组要列出的元素(从数据库中列出)

<ul class="allitems">
  <li class="item laying left">Item1</li>
  <li class="item laying left">Item2</li>
  <li class="item standing right">Item3</li>
  <li class="item standing left">Item4</li>
  <li class="item laying right">Item5</li>
  <li class="item laying right">Item6</li>
</ul>

所有item都向左浮动，但Item3相对Item2向左浮动的问题。我想位于 Item1 的“顶部”(如箭头所示)。

CSS:

.allitems {list-style-type: none;margin:0;padding:0;width:1000px;}
.allitems .item {margin-bottom:20px;}
.allitems .item.laying {width:660px;height:230px;background:#006505;color:#fff;float:left;}
.allitems .item.standing {width:320px;height:480px;background:#007cb2;color:#fff;float:left;}
.allitems .item.standing.left {margin-right:20px;}
.allitems .item.standing.right {margin-left:20px;}

如何在不改变元素顺序的情况下解决这个问题？ (使用 CSS!)。我添加 html 没有问题，但我无法更改顺序。

Answer 1

你应该能够通过不 float standing.right 元素来实现你想要的 - 只需为其添加边距:

.allitems {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 1000px;
}
.allitems .item {
  margin-bottom: 20px;
}
.allitems .item.laying {
  width: 660px;
  height: 230px;
  background: #006505;
  color: #fff;
}
.allitems .item.standing {
  width: 320px;
  height: 480px;
  background: #007cb2;
  color: #fff;
}
.allitems .item.standing.left {
  margin-right: 20px;
}
.allitems .item.standing.right {
  float: none;
  /*remove float and margin left auto instead*/
  margin-left: auto;
}
.left {
  float: left;
}
.right {
  float: right;
}

<ul class="allitems">
  <li class="item laying left">Item1</li>
  <li class="item laying left">Item2</li>
  <li class="item standing right">Item3</li>
  <li class="item standing left">Item4</li>
  <li class="item laying right">Item5</li>
  <li class="item laying right">Item6</li>
</ul>

更新

刚刚看到您不想在边距上使用特定的像素值，所以您可以使用 margin-left:auto 代替 margin left 680px 和这将恰好对齐站立的 div(请参阅上面编辑过的片段)