Вопрос:
Я не нашел ответа на этот конкретный случай, поэтому решил задать новый вопрос. Я хочу иметь 2 DIVs в левой части страницы (с фиксированной шириной) и один DIV с правой стороны, занимая остальную часть ширины страницы. Также единственный DIV справа должен иметь свою независимую высоту (когда его высота увеличивается, она не должна влиять на высоту или положение DIVs слева). Что-то вроде этого – то, что я хочу:
Это код HTML:
<body> <div class=»div1″>Div1</div> <div class=»div3″>Div3</div> <div class=»div2″>Div2</div> </body>
Это CSS, который у меня есть прямо сейчас:
div.div1 { float: left; height: 400px; margin-right: 10px; width: 200px; } div.div3 { height: 425px; overflow: hidden; } div.div2 { clear: left; float: left; height: 15px; margin-top: 10px; }
Единственная проблема заключается в том, что верхняя позиция Div2 зависит от высоты Div3, и я получаю что-то вроде этого:
Лучший ответ:
теперь вы можете использовать правильный контент с переполнением: скрытый и не конфликтующий с левыми div.
Проверьте это:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; } Ответ №1
Попробуйте следующее:
<html> <head> <style> div.div1 { float: left; height: 400px; margin-right: 10px; width: 200px; background-color: blue; } div.div2 { clear: left; float: left; height: 15px; width: 200px; margin-top: 10px; background-color: red; } div.div3 { height: 425px; overflow: hidden; background-color: green; } </style> </head> <body> <div class=»div1″>Div1</div> <div class=»div2″>Div2</div> <div class=»div3″>Div3</div> </body> </html>
Как только я повторно заказал Divs и добавил ширину для Div 2, он отлично работает
https://jsfiddle.net/6g7qx26b/
Это также работает, если вы замените свойства высоты css свойствами min-height, что обеспечивает большую гибкость. Ширины также могут быть указаны в процентах
Ответ №2
Проверьте это на http://jsfiddle.net/cz2fP/
<div style=»float:left;»> <div class=»div1″>Div1</div> <div class=»div2″>Div2</div> </div> <div class=»div3″>Div3</div>
Группировка элемента div слева с помощью другого элемента div.
Ответ №3div.div1 { height: 400px; margin-right: 10px; width: 200px; background: red; float: left; } div.div3 { height: 15px; margin-top: 10px; margin-right: 10px; background: green; clear: both; width: 200px; } div.div2 { height: 425px; overflow: hidden; background: blue; float: left; width: 200px; } <div style=»float:left;»> <div class=»div1″>Div1</div> <div class=»div2″>Div2</div> </div> <div class=»div3″>Div3</div>
И посмотрите эту ссылку http://jsfiddle.net/bipin_kumar/cz2fP/3/
Ответ №4<style> div.left{ float: left; } .main{ width : 100%; } .clear{ clear : both; } div.div1, div.div2 { margin-right: 10px; width: 200px; background: red; } div.div1 { height: 400px; } </style> <body> <div class=»main»> <div class=»left»> <div class=»div1″>Div1</div> <div class=»div2″>Div2</div> </div> <div class=»div3″>Div3</div> <div class=»clear»></div> </div> </body>
http://jsfiddle.net/rkpatel/qd6Af/1/
Ответ №5
Попробуйте это
<body> <div class=»left»> <div class=»div1″>Div1</div> <div class=»div2″>Div2</div> </div> <div class=»div3″>Div3</div> </body>
Ответ №6 <div class=»main»> <div class=»div1″> <div class=»div2″></div> <div class==»div3″></div> </div> <div class=»div4″></div> </div>
и в css используйте min-height property
.div1 { float:left; } .div4 { float:right; } .main { min-height:200px; }
