根据错误的项

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>

所有项目都向左浮动，但Item3浮动的问题相对于Item2。我希望成为＆＃34; top＆＃34; （如箭头所示）与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

你应该能够通过不浮动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>

<强>更新

刚看到你不想在边距上使用特定的像素值，所以你可以使用680px而不是边距margin-left:auto，这样就可以正确对齐常设div（参见上面编辑过的片段）

Answer 2

为.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;
  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;
  margin-top: -250px; /* added this line */
}

<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>

Answer 3

将item3定位到relative＆amp;添加等于item1 + item2高度的负top OR 正bottom值似乎有效。您只需要像这样更改item3类

.allitems .item.standing.right {
   margin-left:20px;
   position: relative;
   top: -15.5em; //or bottom: 15.5em/pc
}

你可以尝试这个＆amp;让我知道。

Answer 4

交换HTML元素的顺序：在 Item2 之前添加 Item3 ：

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

然后，只需将float:right添加到 Item3 。

尝试使用此JSFiddle：）

Answer 5

通过使用定位和将item3的类名更改为item2

＆＃13;

＆＃13;

.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.layingleft {width:660px;height:230px;background:#006505;color:#fff;float:left;position: absolute;top: 258px;}
.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;