div right aligned dont keep at top

Как я могу сохранить свою красную коробку на верхней строке, когда центр div имеет очень широкий контент? Когда центрированный div имеет много контента, красный div переходит в другую строку. Вы знаете, почему это происходит?div right aligned dont keep at top

Посмотрите на мой код: http://jsfiddle.net/5dC6T/3/

источник

2012-07-03 Ronaldo

Можете ли вы уточнить? Из того, что я вижу, независимо от того, сколько контента находится в центральном div, яркий красный квадрат справа остается привязанным к вершине контейнера. Так в чем проблема? – Utkanos

@Utkanos пытается изменить размер окна; содержимое падает ниже контейнера. – Wex

Когда я изменяю размер браузера меньше, яркий красный квадрат справа падает ниже текста. Это то, что вы хотите предотвратить? – Utkanos

Проблема в том, что вы заказали свой <div> элементов. Попробуйте:

<div> 
    <div class="red-box"></div> 
    <img class="photo" alt="" /> 
    <span>Name</span> 
    <span>Data</span> 
    <span>City</span> 
</div>

CSS:

/* These two will stay anchored on the right and left */ 
.red-box { float: right; } 
img.photo { float: left; }

Я сделал эти изменения к текущему коду: http://jsfiddle.net/Wexcode/38qYS/

источник

2012-07-03 22:18:06 Wex

Очень хорошо. Почему это происходит? Я добился того, что хочу удалить поплавок слева от центрального столбца и изменить порядок. – Ronaldo

Поплавки позволяют обтекать содержимое, но это произойдет, только если элемент с плавающей точкой появится над другими элементами разметки. – Wex

Используйте этот CSS:

#QuadroEvento div.TopoEvento div.euvou{ 
    height: 90px; 
    width: 90px; 
    background-color: red; 
    position: absolute; 
    right: 0px; 
    margin-right: 0px; 
}

Ключ существо: position: absolute;

Вы также можете использовать position: fixed; и т.д., смотрите здесь для более подробной информации : http://www.w3schools.com/cssref/pr_class_position.asp

источник

2012-07-03 22:17:47

div right aligned dont keep at top

ответ

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