将最后一个 div 浮动到第一个 div 旁边

发布于 2024-12-20 06:39:03 字数 410 浏览 2 评论 0原文

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

在此处输入图像描述

原文

This is my HTML

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

How can I get this image by using only CSS? I guess with float, but how can I get the fifth div next to the first one?
Changing the HTML is NOT (!) an option.

enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诠释孤独 2024-12-27 06:39:03

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

My first comment would be that class names can't start with a number, so I really hope that you can edit the HTML for that. To answer your question ignoring this fact, if each element has a class, this is pretty simple. Just do this:

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

Preview: http://jsfiddle.net/Wexcode/mvwSL/

回复收藏 0 原文

南…巷孤猫 2024-12-27 06:39:03

您有几个选项：

浮动和负边距：

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

演示

或仅边距

< code>. Five{margin:-500px 0 0 200px;}

演示

或者相对定位：

. Five{position:relative;顶部：-500px； left:200px;}

演示

或绝对定位：

.五个{位置：绝对;顶部：0； right:0;}

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

演示

回复收藏 0 原文

蓬勃野心 2024-12-27 06:39:03

首先，具有数值的类无效。如果你不能改变它们，你就完蛋了......有了适当的类，解决方案可能是：

CSS :

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

jQuery

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

参见这个小提琴

First, classes with numeric values are not valid. You're quite screwed if you can't change them... With proper classes, a solution might be:

CSS :

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

jQuery

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

See this fiddle

回复收藏 0 原文

梦幻之岛 2024-12-27 06:39:03

@Wex

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

@Wex

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

回复收藏 0 原文

纵情客 2024-12-27 06:39:03

请尝试以下操作：它可以按照您的要求工作，但是水平方向，您想要垂直方向。但我确信它可能对你有帮助。

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

Try below: It works as you required but horizontally, you want vertically. But am sure it might help you.

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

回复收藏 0 原文

~没有更多了~