Базовый HTML и CSS Float Issue

В следующем примере также можно найти по адресу: http://jsfiddle.net/vqBLX/1/ есть ли способ получить блок «шесть», чтобы плавать в верхней части правого столбца, без изменения его положения в html?Базовый HTML и CSS Float Issue

Пример кода:

#container{width:200px; backgroung:#ccc;} 
.box{width:110px; height:100px; background-color:red;} 
.one, .two, .three, .four, .five{float:left} 
.six{float:right; background-color:blue; width:90px;}

<div id="container"> 
    <div class="box one"> </div> 
    <div class="box two"> </div> 
    <div class="box three"> </div> 
    <div class="box four"> </div> 
    <div class="box five"> </div> 
    <div class="box six"> </div> 
</div>

источник

2012-03-01 Front_End_Dev

Не без использования абсолютного или относительного позиционирования. Вы могли бы поставить его вторым и поплавать. Или положите его первым и плавайте.

Чтобы установить его абсолютно, установите # контейнер на position: relative. Установите поле с шестью в position: absolute; top: 0; right: 0

Или используйте идею маржи, как предложено другими.

источник

2012-03-01 02:15:33

Вы правы в своем первом предложении, но OP не хочет менять позицию элемента в HTML. –

Да, вот почему я показал, как делать с абсолютным позиционированием –

да, я думаю, мне, возможно, придется использовать абсолютное позиционирование. В моем построении сайта нет ничего плавающего права, которое бы помешало мне полностью позиционировать «шесть». Я устаю и хочу, чтобы я не забывал что-то очевидное. –

Не самый лучший ответ, но это работает:

.six{float:right; background-color:blue; width:90px; margin-top: -400px;}

источник

2012-03-01 02:15:27 Raptor

@peter, который будет работать, но это не кажется правильным. Это также сломается, если какая-либо коробка в левом столбце изменит вертикальную высоту. Нет ли других способов? –

Существует. Вы можете группировать красные прямоугольники с помощью DIV. Затем вы можете управлять положением синего квадрата. – Raptor

Хм, я думаю, мой простой вопрос ответить на сложную проблему не работает. Я пытаюсь создать отзывчивый макет, где в некоторых точках столбцы выравниваются по вертикали, а другие столбцы падают рядом друг с другом. Кажется, я знаю, что мне нужно делать сейчас. –

Вы можете добавить:

position: relative; top: -400px;

к вашему .six класса в CSS.

источник

2012-03-01 02:16:01

.six{position: relative; left:110px; top:0px; background-color:blue; width:90px;}

http://jsfiddle.net/vqBLX/9/

Не уверен, что это то, что вы ищете.

источник

2012-03-01 02:17:44 Chloe

Это было бы именно то, что я ищу, но по какой-то причине на моем фактическом сайте он стучит в сторону боковой панели справа. –

Несмотря на то, что вы приняли мой ответ, если вы хотите использовать позицию относительно, то, что вам в основном нужно делать, это увидеть, где он находится без позиции, а затем измерить, сколько пикселей вам нужно будет использовать, чтобы получить его там, где вы хотите (см. up = -top, down = top, left = -left, right = left). Относительно это не выводит его из потока документов, поэтому он оставляет пространство, где оно должно быть. –

Базовый HTML и CSS Float Issue

ответ

Смежные вопросы