第一个浮点数的最后一个div

问题描述 投票：3回答：5

这是我的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不是（！）选项。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9VcGVlby5wbmcifQ==” alt =“在此处输入图像描述”>

html css css-float
5个回答
4
投票

我的第一句话是类名不能以数字开头，所以我真的希望您可以为此编辑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/

1
投票

您有几种选择：

浮动和负边距：

.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

0
投票

首先，带有数字值的类无效。如果您不能更改它们，您将非常烦恼...使用适当的类，一个解决方案可能是：

CSS：

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

jQuery

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

参见此fiddle

0
投票

@ Wex

div:last-child{
    float: none; 
    clear: none; 
    display: inline-block;
}
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.