проблема с переносом div с обтеканием в блочной верстке

semitri · 23.01.2008, 12:55

Добрый день, поискал как подобную проблему решают и ничего кроме "Вставь таблицу и не парься..." не нашел. Между тем проблема следующая:

Есть 5 блоков с обтиканием float:left. Все хорошо, но если я сужаю экран они начинают выстраиваться в столбик. Пробовал указать у родительского блока min-width. Команда отрабатывает, родительский блок перестает сужаться, но это не мешает дочерним 5 блокам выстаиваться в столбик.

Господа, если кто-нибудь знает способ запретить перенос div, поделитесь пожалуйста.

Спасибо!

KidsKilla · 23.01.2008, 17:51

смысл запрещать? кроссбраузерно запретить перенос div у которого указан float нельзя.
а то что "min-width не мешает дочерним 5 блокам выстаиваться в столбик" не более чем кривость рук.

semitri · 24.01.2008, 18:48

Хороший комментарий, только Вы можете мне представить пример где min-width не мешает переносу блоков? Без кривости рук.

Смысл запрещать есть, дабы дизайн не рушился при ресайзе окна.

pel · 25.01.2008, 12:53

Странно, что min-width не помог. Попробуйте увеличить его значение, скажем, на 10рх.

Смотрите код ниже - все работает нормально. Но если min-width уменьшить хотя бы на 1рх, то последний блок начинает переноситься.
Здесь, похоже, этот прикол из-за включенных border'ов. 5 блоков по 2рх границ (1рх слева и 1рх справа) = как раз 10рх.
Да и если отображение границ отключить, то min-width:500рх становится достаточно

Код:

<div style="width:100%; height:100%; border:1px solid black; min-width:510px;">
  <div style="width:100px; height:100px; border:1px dashed red; float:left;">1</div>
  <div style="width:100px; height:100px; border:1px dashed orange; float:left;">2</div>
  <div style="width:100px; height:100px; border:1px dashed magenta; float:left;">3</div>
  <div style="width:100px; height:100px; border:1px dashed green; float:left;">4</div>
  <div style="width:100px; height:100px; border:1px dashed blue; float:left;">5</div>
</div>

P.$. Если это не помогло, скиньте, плз, пример Вашего кода

KidsKilla · 25.01.2008, 16:04

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> -->
<title>Untitled</title>
<style type="text/css">
</style>
</head><body><script type="text/javascript"></script>
<div style="min-width:310px;">
<div style="float:left;width:33%;border:1px solid red;"><div style="width:100px;">100px</div></div>
<div style="float:left;width:33%;border:1px solid red;"><div style="width:100px;">100px</div></div>
<div style="float:left;width:32%;border:1px solid red;"><div style="width:100px;">100px</div></div>
</div>
</body>
</html>

Цитата:

Вы можете мне представить пример где min-width не мешает переносу блоков? Без кривости рук.

вероятно напрягают переносы в ие. бо в прочих браузерах все нормально.
для этих случаев:
http://www.artlebedev.ru/tools/techn..._floats_in_ie/

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид