Плавать последний div рядом с первым - PullRequest
Новая
       6

Плавать последний div рядом с первым

3 голосов
/ 09 декабря 2011

Это мой 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

Ответы [ 5 ]

4 голосов
/ 09 декабря 2011

Мой первый комментарий: имена классов не могут начинаться с цифры, поэтому я очень надеюсь, что вы сможете отредактировать 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 голос
/ 09 декабря 2011

У вас есть несколько вариантов:

Float и отрицательные поля:

.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;)

Демо

0 голосов
/ 09 декабря 2011

@ Векс 

div:last-child{
    float: none; 
    clear: none; 
    display: inline-block;
}
0 голосов
/ 09 декабря 2011

Попробуйте ниже: он работает так, как вам нужно, но горизонтально, вы хотите вертикально. Но я уверен, что это может вам помочь. 

<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>
0 голосов
/ 09 декабря 2011

Во-первых, классы с числовыми значениями недопустимы.Вы сильно облажались, если не можете их изменить ... С правильными классами может быть решение:

CSS: 

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

jQuery 

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

Смотрите это скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...