Question

这是我的HTML

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

如何仅使用CSS获取此图像？我想用float，但我怎么能得到第一个旁边的第五个div？更改HTML不是（！）的选项。

enter image description here

Answer 1

我的第一个评论是类名不能以数字开头，所以我真的希望你可以编辑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/

Answer 2

您有几个选择：

浮动和负边距：

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

Demo

仅限保证金

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

Demo

或相对定位：

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

Demo

或绝对定位：

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

（确保容器设置为position:relative;）

Demo

Answer 3

首先，具有数值的类无效。如果你不能改变它们，那你就搞砸了......通过适当的课程，解决方案可能是：

CSS：

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

的jQuery

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

请参阅此fiddle

Answer 4

尝试以下内容：它可以按照您的要求工作，但水平，您需要垂直。但我相信它可能对你有帮助。

<html>
    <head>
     <style type="text/css">
      #outer {
       width: 500px;
       margin: 300px 0 0 10px;

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

      }
     </style>
    </head>

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

Answer 5

@Wex

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

浮动最后一个div旁边的第一个

5 个答案: