Раскладка в CSS: float » комментарииhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/2019-09-14T00:30:19-07:00Иван Сагалаев о программировании и веб-разработкеhttp://softwaremaniacs.org/media/sm_org/style/photo.jpgКонстантин на "Раскладка в CSS: float"
2019-09-14T00:30:19-07:00Константинhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-494588Очень интересная статья, привет из 2019 года)
<p>Очень интересная статья, привет из 2019 года)Николай на "Раскладка в CSS: float"
2017-05-24T08:06:52.335876-07:00Николайhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-494485На Ваше мнение вот такой способ может иметь право на существование, если необходимо решить задачу растягивания колонки. https://jsfiddle.net/nikolayandr/hxp1yob0/1/
<p>На Ваше мнение вот такой способ может иметь право на существование, если необходимо решить задачу растягивания колонки. <a href="https://jsfiddle.net/nikolayandr/hxp1yob0/1/">https://jsfiddle.net/nikolayandr/hxp1yob0/1/</a>Mikolalex на "Раскладка в CSS: float"
2014-11-18T05:29:59.067387-08:00Mikolalexhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-494322Дело в том, что в CSS, к сожалению, нельзя напрямую сформулировать такую вещь как "вся доступная ширина минус конкретное число". Уже можно, с помощью конструкции calc: width: calc(100% - 200px); http://htmlbook.ru/css/calc
<blockquote>
<p>Дело в том, что в CSS, к сожалению, нельзя напрямую сформулировать такую вещь как "вся доступная ширина минус конкретное число".</p>
</blockquote>
<p>Уже можно, с помощью конструкции calc: width: calc(100% - 200px);
<a href="http://htmlbook.ru/css/calc">http://htmlbook.ru/css/calc</a>AF на "Раскладка в CSS: float"
2013-06-25T18:43:26.443182-07:00AFhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-260753Почему бы просто не использовать огромную высоту колонок вместо этого маргина и паддинга. Overаlow в контейнере и мы видим тот же результат.
<p>Почему бы просто не использовать огромную высоту колонок вместо этого маргина и паддинга. Overаlow в контейнере и мы видим тот же результат.AF на "Раскладка в CSS: float"
2013-06-25T18:34:39.772210-07:00AFhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-260751В случае с padding-bottom:32767px; margin-bottom:-32767px; и контейнером с overflow:hidden контейнер должен иметь какую-то фиксированную высоту, по которой будет ограничивать колонки своим overflow. Получается, что колонки не растягиваются более высоты контейнера и способ весьма слабоват.
<p>В случае с</p>
<pre><code>padding-bottom:32767px;
margin-bottom:-32767px;
</code></pre>
<p>и контейнером с overflow:hidden контейнер должен иметь какую-то фиксированную высоту, по которой будет ограничивать колонки своим overflow. Получается, что колонки не растягиваются более высоты контейнера и способ весьма слабоват.Float: перемещаемые элементы « СамомуМне's Блог на "Раскладка в CSS: float"
2012-08-10T22:15:24.628366-07:00Float: перемещаемые элементы « СамомуМне's Блогhttp://l4me.wordpress.com/2012/03/13/float-%d0%bf%d0%b5%d1%80%d0%b5%d0%bc%d0%b5%d1%89%d0%b0%d0%b5%d0%bc%d1%8b%d0%b5-%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b/https://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-157500Раскладка в CSS: float
<p>Раскладка в CSS: floatВадим на "Раскладка в CSS: float"
2012-04-18T22:22:11.512843-07:00Вадимhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-128662Очень ценная статья! Я как начинающих верстальщик, не раз сталкивался, с подобным чудом и всегда меня выручали друзья, но теперь, я думаю, что смогу осилить эту "пакостную" тему! Спасибо огромное, с меня чай с бутиками))
<p>Очень ценная статья! Я как начинающих верстальщик, не раз сталкивался, с подобным чудом и всегда меня выручали друзья, но теперь, я думаю, что смогу осилить эту "пакостную" тему!</p>
<p>Спасибо огромное, с меня чай с бутиками))Вредная верстка | Server Room на "Раскладка в CSS: float"
2012-01-26T07:22:46.517173-08:00Вредная верстка | Server Roomhttp://it-hfs.ru/?p=94https://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-115099Интересующимся техническими подробностями, рекомендую замечательную статью Ивана Сагалаева.
<p>Интересующимся техническими подробностями, рекомендую замечательную статью Ивана Сагалаева.Владимир на "Раскладка в CSS: float"
2012-01-14T07:03:07.523710-08:00Владимирhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-111224Спасибо за статью! Очень полезная!
<p>Спасибо за статью! Очень полезная!Олег на "Раскладка в CSS: float"
2011-04-26T00:33:05-07:00Олегhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-81107Отличная статья! Недавно на alist apart была статья CSS Floats 101. Нашел ее руский перевод здесь: Плавающие элементы и CSS. Мне кажется это прекрасное дополнения к вашей статье.
<p>Отличная статья!</p>
<p>Недавно на alist apart была статья CSS Floats 101. Нашел ее руский перевод здесь: <a href="http://www.clearboth.ru/article/css-floats-101.html">Плавающие элементы и CSS</a>. Мне кажется это прекрасное дополнения к вашей статье.Семантическая верстка — советы и решения. Часть V. Навигация по сайту или укрощение списков на "Раскладка в CSS: float"
2010-11-28T12:18:18.774211-08:00Семантическая верстка — советы и решения. Часть V. Навигация по сайту или укрощение списковhttp://flack.ru/2008/02/08/semantic-coding-howto-5/https://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-63520Я не буду здесь останавливаться на механизмах работы правила float, так о нем можно писать целые книги. Подробное объяснение на русском можно почепнуть в статье Ивана Сагалаева «Раскладка в CSS: float».
<p>Я не буду здесь останавливаться на механизмах работы правила float, так о нем можно писать целые книги. Подробное объяснение на русском можно почепнуть в статье Ивана Сагалаева «Раскладка в CSS: float».kleincard на "Раскладка в CSS: float"
2010-06-24T09:59:45.243126-07:00kleincardhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-47578Спасибо огромное! Я учусь на курсах, и, как на зло, пропустила супер-важную тему позиционирования в css. C вашей помощью, наконец-то, поняла что к чему. Очень рада такому обстоятельству. Тем более, что все доступно написано. Еще раз спасибо.
<p>Спасибо огромное! Я учусь на курсах, и, как на зло, пропустила супер-важную тему позиционирования в css. C вашей помощью, наконец-то, поняла что к чему. Очень рада такому обстоятельству.
Тем более, что все доступно написано. Еще раз спасибо.Фдуч на "Раскладка в CSS: float"
2010-04-26T09:18:53.649003-07:00Фдучhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-43723Действительно, просто великолепные статьи пишите!!! Я в общем достаточно давно верстаю, но ваши статьи пролили свет на кучу моментов, используемых раньше интуитивно. Большое вам за это спасибо!!! Кстати, как там насчет книжки? ))Еще не дозрела идея до реализации? ))
<p>Действительно, просто великолепные статьи пишите!!! Я в общем достаточно давно верстаю, но ваши статьи пролили свет на кучу моментов, используемых раньше интуитивно. Большое вам за это спасибо!!!
Кстати, как там насчет книжки? ))Еще не дозрела идея до реализации? ))a на "Раскладка в CSS: float"
2010-04-17T10:53:10.473982-07:00ahttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-42602Я начинающий. И лично мне кажеться, что начинающему это не поможет, а знающему уже известно. Если Вы пишите для начинающих, то пишите завершенные примеры, как в хороших книгах. Чтобы не надо было читать весь сайт, чтобы понять 1 фразу. Да и балагурить поменьше, это отвлекает и сжирает время. Не обижайтесь.
<p>Я начинающий. И лично мне кажеться, что начинающему это не поможет, а знающему уже известно. Если Вы пишите для начинающих, то пишите завершенные примеры, как в хороших книгах. Чтобы не надо было читать весь сайт, чтобы понять 1 фразу. Да и балагурить поменьше, это отвлекает и сжирает время. Не обижайтесь. ivankin на "Раскладка в CSS: float"
2010-03-27T01:16:20.020080-07:00ivankinhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-40921Может кому поможет)) ещё 1 вариант пофиксить баг IE (а именно 6ая версия). Если у Вас ситуация допустим, что в одном блоке размещается, несколько других блоков с float'ом... Допустим вы делаете фотогаллерею, где в блок галлереи будет вмещаться по 3 картинки вряд, а таких рядов у нас великое множество... Вот...
<p>Может кому поможет)) ещё 1 вариант пофиксить баг IE (а именно 6ая версия).
Если у Вас ситуация допустим, что в одном блоке размещается, несколько других блоков с float'ом... Допустим вы делаете фотогаллерею, где в блок галлереи будет вмещаться по 3 картинки вряд, а таких рядов у нас великое множество... </p>
<p>Вот пример, где образуется сетка 2х2.</p>
<pre><code>/* html */
<div id="box">
<div class="image"> ... </div>
<div class="image"> ... </div>
<div class="image"> ... </div>
<div class="image"> ... </div>
</div>
/* css */
#box { width: 200px; }
.image { width: 100px; height: 100px; float: left; }
</code></pre>
<p>Во всех браузерах будет отображаться всё без отступов и корректно. 2 картинки вместились в ряд, 3ья картинка пошла на следующий, ну итд...</p>
<p>А вот IE6 будет рисовать отступы между каждым рядом. Нашёл как победить это, чем и делюсь с Вами. Нужно добавить font-size: 0pt; в #box.
Получится следующее:</p>
<pre><code>...
#box { width: 200px; font-size: 0pt; }
</code></pre>
<p>Буду рад если кому-нибудь это поможет)Softm: фриланс как стиль жизни » Архив блога » Борьба с CSS на "Раскладка в CSS: float"
2010-03-11T06:11:47.422364-08:00Softm: фриланс как стиль жизни » Архив блога » Борьба с CSShttp://softm.org.ua/borba-s-css/https://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-39455Наткнулся в итоге на статью, про флоаты. Не дочитал – так как монументально писано. Ложу себе ссылку на память.
<p>Наткнулся в итоге на статью, про флоаты. Не дочитал – так как монументально писано. Ложу себе ссылку на память.rvnikita на "Раскладка в CSS: float"
2010-01-10T14:22:08-08:00rvnikitahttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-34713Спасибо за статью.
<p>Спасибо за статью.Геннадий на "Раскладка в CSS: float"
2010-01-04T15:21:09-08:00Геннадийhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-34684Иван, большое спасибо за статью - Вы действительно собрали все в одном месте о Float. Но вот ответа на свой вопрос о применении Float и его отмене в контенте, при использовании Float-колоночной раскладки сайта я к сожалению не нашел. Вот тестовая страничка (http://lrimi.ru/simple.html)), где требуется отменить Float для абзаца и...
<p>Иван, большое спасибо за статью - Вы действительно собрали все в одном месте о Float.</p>
<p>Но вот ответа на свой вопрос о применении Float и его отмене в контенте, при использовании Float-колоночной раскладки сайта я к сожалению не нашел.</p>
<p>Вот тестовая страничка (<a href="http://lrimi.ru/simple.html">http://lrimi.ru/simple.html)</a>), где требуется отменить Float для абзаца и заголовка. Если применить Clear:left или Clear:both, то абзац и заголовок "провалятся" ниже нижней границы левой колонки.<br>
Ведь Clear Float применяется не к последнему элементу со свойством Float, а жаль - как все было бы просто.KakTyC на "Раскладка в CSS: float"
2009-12-27T12:11:16-08:00KakTyChttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-34627Огромное спасибо за статью. До этого долго мучился с позиционированием элементов.
<p>Огромное спасибо за статью. До этого долго мучился с позиционированием элементов.Саша на "Раскладка в CSS: float"
2009-10-29T02:54:15-07:00Сашаhttps://softwaremaniacs.org/blog/2005/12/01/css-layout-float/#comment-34022Высота колонок Опять-таки, я далеко не случайно "отрезал" на картинках >нижнюю часть блоков :-). Иначе бы они как колонки совсем >не выглядели, потому что, как нетрудно убедиться, если >применить те фрагменты CSS, что я привел, и раскрасить >колонки разными цветами, то их высота оказывается разной. >Она зависит от количества содержимого...
<blockquote>
<p>Высота колонок</p>
<p>Опять-таки, я далеко не случайно "отрезал" на картинках >нижнюю часть блоков :-). Иначе бы они как колонки совсем >не выглядели, потому что, как нетрудно убедиться, если >применить те фрагменты CSS, что я привел, и раскрасить >колонки разными цветами, то их высота оказывается разной. >Она зависит от количества содержимого в этих блоках.</p>
</blockquote>
<p>Но ведь, если обе колонки находятся в одном контейнере, то можно у обоих колонок убрать отступ снизу и сверху.</p>
<p>** #sidebar {<br>
float:right; width:200px; margin-buttom:0; margin-top:0;<br>
}</p>
<p>content {</p>
<p>margin-right:200px; margin-buttom:0; margin-top:0;<br>
}<br>
**<br>
Тогда обе колонки будут растягиваться во всю ширину контейнера. (может я не прав, просто изучение CSS начал именно с этого учебника вчера))