quickreg Posted March 15, 2014 Report Share Posted March 15, 2014 Проблема, когда создаю 2 колонки флоат задаю им получается что основной див не раздвигает внутреннийк примеру такой вариант <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Две колонки</title> <style type="text/css"> #container { border: 5px solid #444444; /* Общая ширина макета */ margin: 0 auto; /* Выравниваем по центру */ } #leftcol { float: left; background: #f0f0f0; width: 600px;background-color: #333; } #rightcol { float: left;margin-left: 10px; background: #fc0; width: 200px;background-color: #555555; } #leftcol2 { float: left; background: #f0f0f0; background-color: #333; } #rightcol2 { margin-left: 10px; background: #fc0; width: 100px;background-color: #555555; } .clear { clear: left; } </style> </head> <body> <div id="container"> <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br> <div style="clear: both"></div> <div style="border: 3px solid #09F;"> <div id="leftcol2">leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br>leftcol2<br></div> <div id="rightcol2">rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br>rightcol2<br></div> </div> <div style="clear:both"></div> dsfhsadjfh<br> dsfhsadjfh<br> dsfhsadjfh<br> dsfhsadjfh<br> dsfhsadjfh<br> </div> <div id="rightcol">Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br>Правая колонка<br></div> <div class="clear"></div> <p>Текст</p> </div> </body></html> Quote Link to comment Share on other sites More sharing options...
0 DragorWW Posted March 15, 2014 Report Share Posted March 15, 2014 Проблема, когда создаю 2 колонки флоат задаю им получается что основной див не раздвигает внутренний к примеру такой вариант советую делать через table-cell, вот примерhttp://jsfiddle.net/DragorWW/sHSvb/ Quote Link to comment Share on other sites More sharing options...
0 quickreg Posted March 18, 2014 Author Report Share Posted March 18, 2014 И всетки как правильно пользоваться float и clear чтобы не глючило???просто когда мы внутри этих дивов засовываем конструкции из 2 div с float корневой div начинает глючить и он не раздвигается по высоте становится в 0 пикселей как от этого избавиться? да и когда используешь clear:both то он зачемто берет высоту предыдущего float и раздвигает див на высоту div который стоит еще на 2 уровня выше который float:left что за ерунда?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Две колонки</title> <style type="text/css"> #conteiner { border: 4px solid #09F; background-color: #090; } #leftcol { float: left; background: #f0f0f0; width: 600px; } #rightcol { float: left; background: #fc0; width: 200px; } </style> </head> <body> <div id="conteiner"> <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div> </div> </body></html> Quote Link to comment Share on other sites More sharing options...
0 quickreg Posted March 18, 2014 Author Report Share Posted March 18, 2014 вот даже более наглядный пример проблемы...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Две колонки</title> <style type="text/css"> #conteiner { position: absolute; border: 4px solid #09F; background-color: #090; } #leftcol { float: left; background: #f0f0f0; width: 600px; } #rightcol { float: left; background: #fc0; width: 200px; } #conteiner2 { position: absolute; border: 4px solid #09F; background-color: #090; } #leftcol2 { float: left; background: #f0f0f0; width: 80px; } #rightcol2 { float: left; background: #fc0; width: 80px; } </style> </head> <body> <div id="conteiner"> <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /> <div id="conteiner2"> <div id="leftcol2">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol2">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div> </div> qweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqwe </div> </div> </body></html>Вот и второй вопрос всплыл почему див левый стал расширять внутренние дивы???<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Две колонки</title> <style type="text/css"> #conteiner { position: absolute; border: 4px solid #09F; background-color: #090; } #leftcol { float: left; background: #f0f0f0; width: 600px; } #rightcol { margin-left: 700px; background: #fc0; width: 200px; } #conteiner2 { border: 2px solid #0F0; background-color: #090; } #leftcol2 { float: left; background: #f0f0f0; width: 80px; } #rightcol2 { background: #fc0;margin-left: 82px;width: 80px; } </style> </head> <body> <div id="conteiner"> <div id="leftcol">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /> <div id="conteiner2"> <div id="leftcol2">Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br>Левая колонка<br></div> <div id="rightcol2">Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br />Правая колонка<br /></div> <div style="clear:both"></div> </div> qweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqweqweqw<br>Qqweqwe </div> </div> </body></html> Quote Link to comment Share on other sites More sharing options...
0 darknebel Posted March 18, 2014 Report Share Posted March 18, 2014 http://jsfiddle.net/sHSvb/2/ -- посмотрите такой вариант. http://htmlbook.ru/layout -- еще здесь посмотрите. Quote Link to comment Share on other sites More sharing options...
0 quickreg Posted March 18, 2014 Author Report Share Posted March 18, 2014 Спасибо попробую разобраться я так понимаю лучше использовать два float: leftпросто когда я использую один у меня внутри контента уже не получится использовать clear... все съезжать будет... Quote Link to comment Share on other sites More sharing options...
0 quickreg Posted March 18, 2014 Author Report Share Posted March 18, 2014 (edited) Так тут такой вопрос если вот например используем данные варианты решения то <div> который внутри он не будет расширятся на 100% по ширине? если нет то как сделать чтобы он расширился на ширину родительского div? Edited March 18, 2014 by quickreg Quote Link to comment Share on other sites More sharing options...
0 p.max Posted March 18, 2014 Report Share Posted March 18, 2014 Для родительского div можно прописать overflow: hidden;Тогда родительский div растянется. Но это накладывает некоторые ограничения. Quote Link to comment Share on other sites More sharing options...
0 klierik Posted March 19, 2014 Report Share Posted March 19, 2014 @quickreg, почитай в подписи как правильно задавать вопрос. Для листов кода существует песочницы (или спойлер в крайнем случае). Устное предупреждение. Quote Link to comment Share on other sites More sharing options...
Question
quickreg
Проблема, когда создаю 2 колонки флоат задаю им получается что основной див не раздвигает внутренний
к примеру такой вариант
Link to comment
Share on other sites
8 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.