将最后一个浮动元素放在第一个元素旁边。

Question

将最后一个浮动元素放在第一个元素旁边。

3

这是我的HTML

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>
<div class="four">...</div>
<div class="five">...</div>

如何仅使用CSS获取此图像？我猜测可以使用float，但是如何将第五个div放在第一个div旁边？更改HTML不是选项。

- Michiel

5个回答

1

你有几个选项：

浮动和负边距：

.five{float:right; margin-top:-500px;}

演示

或仅使用边距

.five{margin:-500px 0 0 200px;}

演示

或相对定位：

.five{position:relative; top:-500px; left:200px;}

演示

或绝对定位：

.five{position:absolute; top:0; right:0;}

(确保容器设置为position:relative;)

演示

- bookcasey

0

尝试以下内容：它按您所需的方式工作，但是水平的，您想要垂直的。但我相信它可能会对您有所帮助。

#outer {
width: 500px;
margin: 300px 0 0 10px;
}

.inner {
background-color: red;
width: 100px;
height: 100px;
float: left;
margin: 10px;
}

<html>
    <body>
     <div id="outer">
      <div class="inner">1</div>
      <div class="inner">2</div>
      <div class="inner">3</div>
      <div class="inner">4</div>
      <div class="inner">5</div>
      <div class="inner">6</div>
      <div class="inner">7</div>
    </div>
  </body>
</html>

- user319198

您可以在此处删除它，不要紧。 - user319198

好的，但是你为什么把它放在那里？ - Michiel

哦，好的，这里无所谓吗？ :-) - Michiel

0

首先，具有数字值的类是无效的。如果您无法更改它们，那么您会非常困扰... 通过正确的类，一个解决方案可能是：

CSS：

div {float:left;clear:left}
div.c5 {float:right}

jQuery

$("div.c5").insertBefore("div.c1")

请查看这个fiddle。

- solendil

是的，我知道。那只是为了快速输入！谢谢你的回答。我可以添加CSS类，但无法更改当前值。 - Michiel

0

@Wex

div:last-child{
    float: none; 
    clear: none; 
    display: inline-block;
}

- Yusuf

Wex的答案有什么不同？ - Michiel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wex · Accepted Answer

首先，我要提醒您的是类名不能以数字开头，所以我希望您能够修改HTML内容。不考虑这个问题，如果每个元素都有一个类名，那么这很简单。只需要这样做：

div { 
    float: left; 
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    display: block;
    clear: left; }
div.5 { 
    float: none; 
    clear: none; 
    display: inline-block; }

预览: http://jsfiddle.net/Wexcode/mvwSL/

（此文涉及IT技术）