Firefox CSS: учитывая 2 div, как я могу разместить * второй * справа, используя статическое позиционирование?
Я работаю над Сценарий пользовательского стиля Youtube, который отображает комментарии рядом с видео, чтобы вы могли смотреть видео и читать комментарии одновременно (какая чудесная идея - да). На скриншотах видно, как далеко я продвинулся. Это означает, что меня интересует только Firefox, а CSS3 подходит.
У меня проблема в том, что я хочу создать полностью плавный макет и чтобы div "другие видео" перемещался вправо, в то время как средний div (комментарии) растягивается, чтобы заполнить оставшееся пространство между левым div (воспроизводимое видео) и правый div («другие видео»).
В переводе на CSS проблема такова: с учетом div'ов main, rightnav и footer в этом фиксированном порядке в документе, как я могу сделать div rightnav плавающим вправо, а нижний колонтитул НИЖЕ? Лучшее, что мне удалось сделать, это разместить «rightnav» (справа: 0), но тогда нижний колонтитул идет ниже «основного» div, а не ниже их обоих. Я уже смотрел Используйте CSS для изменения порядка DIV. Отрицательные «верхние» значения отсутствуют, так как они зависят от содержимого «основного» div.
Вот исходный код:
<html lang = "en-US">
<head>
<style type = "text/css">
#main {
border: 1px solid;
float: left;
margin-right: 410px;
}
#rightnav {
background-color: yellow;
opacity: 0.5;
border: 1px dotted;
width: 400px;
float: right;
position: absolute;
right: 0;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id = "baseDiv" style = "width: 100%">
<div id = "main">
<script>for (var i=1; i<100; i++) document.write('main ');</script>
</div>
<div id = "rightnav">
<script>for (var i=1; i<200; i++) document.write('rightnav ');</script>
</div>
<div id = "footer">
<script>for (var i=1; i<100; i++) document.write('footer ');</script>
</div>
</div>
</body>
</html>
Надеюсь, ясно, чего я хочу достичь: «нижний колонтитул» под двумя блоками div и «основной» блок div.
Спасибо за любые идеи.
Ответы 3
Позиция: absolute; в правой руке div, ни в правой: 0; позиционирование. Плавающий div справа рядом с другим перемещается влево (и с установленным полем, как у вас), они должны в конечном итоге оказаться по обе стороны от окна браузера, при этом левый div расширяется, чтобы заполнить доступное пространство (кроме 10-пиксельного зазора, созданного ваша маржа). Когда вы «абсолютно» позиционируете объект, вы фактически удаляете его из обычного потока документа, и он больше не будет занимать какое-либо пространство (и не будет «толкать» другие объекты вокруг). Я подозреваю, что просто удалите позиционирование из правого div, сохраняя при этом ясность: both; в нижнем колонтитуле исправит вашу проблему. Вам также может потребоваться поменять местами левые и правые блоки div в исходном коде, чтобы float: right; элемент стоит перед поплавком: left; предмет. Удачи!
P.S. Меня тоже всегда раздражало, что нельзя одновременно смотреть видео и читать комментарии на YouTube!
Вам также необходимо поменять местами порядок, в котором блоки div появляются в исходном коде, чтобы левый div располагался после правого div. И я не думаю, что вам тоже нужно правое поле.
Как все прошло в итоге, нашли решение?
#main {
border: 1px solid;
width: 50%;
float: left;
}
#rightnav {
background-color: yellow;
opacity: 0.5;
border: 1px dotted;
width: 48%;
float: right;
}
#footer {
clear: both;
}
это сделаю это
изменить: если вы говорите жидкость, что обычно означает размеры, основанные на процентах, начните ассоциировать такие вещи в своей голове
Вау. Я не сказал «жидкость»; Я сказал, что мне нужно, чтобы основной div был плавным, то есть расширялся, чтобы заполнить «оставшееся пространство между левым div (воспроизводимое видео) и правым div (« другие видео »)». Div rightnav имеет фиксированный размер на 400 пикселей, и нет смысла делать его жидким.
тогда ваше решение такое же, но с новым 400px div в качестве дочернего элемента #rightnav (термины жидкость и жидкость взаимозаменяемы)
Это может или не может решить вашу проблему, 3 столбца размером в процентах используют поплавки, содержащие размеры div по вертикали, чтобы разместить самую высокую из 3 панелей, поплавки должны появляться сначала в строке перед средней панелью, IE забавно работает с этим, думает, что этот макет естественен inline, взлом IE можно увидеть в стиле.
Это хорошо работает для многих вещей, могут появиться другие центральные элементы с полями (#mid_con) и будут складываться, проблема только в том, что если высота левой и правой панелей короче первой средней панели, вторая средняя панель займет всю ширину #tub_con cuz на 100% складывается непосредственно под первым средним div. Это можно исправить, задав статическую ширину для (#mid_con), тогда он всегда будет центрироваться и оставаться того же размера, независимо от того, центрирует ли IE его в оставшемся пространстве после поплавков или центрирует его до полной ширины. если данная статическая ширина IE не нужна, поиграйте с ней и получайте удовольствие. Похоже, что float не полностью удаляет div из обычного потока в IE, кажется, он просто подталкивает текущие элементы к появлению и соответствию левому и правому из двух поплавков,
<!--BEGIN HEADER-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" dir = "ltr" lang = "en-US">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
<title>float3col demo</title>
<style>
#tub_con{
display:block;
position:relative;
text-align:center;
width:500px;
height:auto;
margin-left:auto;
margin-right:auto;
border: solid #000000;
}
#left_nav{
display:block;
position:relative;
float:left;
height:80px;
width:30%;
max-width:30%;
border: solid #000000;
}
#right_nav{
display:block;
position:relative;
float:right;
height:80px;
width:30%;
border: solid #000000;
}
#mid_cont{
display:block;
position:relative;
padding-top:5px;
margin-left:auto;
margin-right:auto;
height:auto;
width:35%;
border: solid #f86fff;
}
*html #mid_cont{
display:block;
position:relative;
padding-top:5px;
margin-left:auto;
margin-right:auto;
height:auto;
width:100%;
border: solid #f86fff;
}
</style>
</head>
<body style = "text-align:center;">
<div id = "tub_con">
<div id = "left_nav"></div>
<div id = "right_nav">
</div>
<div id = "mid_cont">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</div>
<!--Test the stacking problem
<div id = "mid_cont">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</div>-->
<div style = "clear:both;"></div>
</div>
<p style = "width:100px; border:solid #000000; margin-left:auto; margin-right:auto;">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</p>
</body>
Это было первое решение, которое я пробовал, но оно не работает: div rightnav никогда не поднимается на вершину baseDiv, но остается ниже основного div.