| |
|
|
| | Есть блоки
<div class="tab_cont">
<ul>
<li class="ba1">1</li>
<li class="ba3">2</li>
<li class="ba4">sdsdsd</li>
<li class="ba5">3</li>
</ul>
</div>
|
Он как связанный элементы и располагаются попорядку.
Проблема:
При плавном изменении ширины окна(которая может легко потом возниикнуть при разлчном тексте) В крайнем правом поместившемся блоке(tab_cont) внутренние элементы перестают располагаться в ряд и становятся в колонку(ползут), при дальнейшем уменьшении уходят в нормальном виде в на новую строку(допускается).
Как сделать чтобы они если не помещаются сазу перелетали на новую строку при условии когда они не помещаются... перелетать длолжны целиком всем блоком tab_cont(таких блоков множество может быть). Притом ширина блока неизвестна, т.к. текст в ba4 не изместен точно.
Без использования JavaScript.
Код html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body style="margin:0px;padding:0px">
<div id="tabs_container" style="background-color:#FFFFFF;left:0px;top:0px;width:100%;height:5%;padding-top:10px;">
<div class="tab_cont">
<ul>
<li class="ba1">1</li>
<li class="ba3">2</li>
<li class="ba4">sdsdsd</li>
<li class="ba5">3</li>
</ul>
</div>
<div class="tab_cont">
<ul>
<li class="ba1">1</li>
<li class="ba3">2</li>
<li class="ba4">sdsdsd</li>
<li class="ba5">3</li>
</ul>
</div>
<div class="tab_cont">
<ul>
<li class="ba1">1</li>
<li class="ba3">2</li>
<li class="ba4">sdsdsd</li>
<li class="ba5">3</li>
</ul>
</div>
<div class="tab_cont">
<ul>
<li class="ba1">1</li>
<li class="ba3">2</li>
<li class="ba4">sdsdsd</li>
<li class="ba5">3</li>
</ul>
</div>
</div>
</body>
</html>
|
Код css:
body,div,ul,ol,li{font-family:Verdana,Arial,sans-serif;font-style:normal;font-size:10px}
body{background-color:white;margin:0px;padding:0px}
ul{margin:0px;padding-top:16px}
li{list-style-position: inside;-moz-float-edge:content-box}
ul, li { list-style-type: none; }
div {float:left;}
div.tab_cont{width:auto; white-space:nowrap;vertical-align:top;margin-top:-5px;}
div.tabs_container{}
ul{white-space:nowrap;}
li.ba1{color:#f00000;float:left;width:2px;height:25px;}
li.ba3{color:#c00000;float:left;width:6px;height:25px;}
li.ba4{color:#a00000;float:left;border-bottom:solid 1px #cccccc;vertical-align:middle;width:auto;height:25px;}
li.ba5{color:#ff0000;float:left;width:6px;height:25px;margin-right:10px;}
|
| |
| |
|
|
| |
|
|
| |
для: bernex
(25.01.2007 в 16:26)
| | |
body,div,ul,ol,li{font-family:Verdana,Arial,sans-serif;font-style:normal;font-size:10px}
body{background-color:white;margin:0px;padding:0px}
ul{margin:0px;padding-top:16px}
li{display:inline}
ul, li { list-style-type: none; }
div {float:left;}
div.tab_cont{width:auto; white-space:nowrap;vertical-align:top;margin-top:-5px;}
div.tabs_container{}
ul{white-space:nowrap;;
display:block;
border:1px solid red;
}
li.ba1{color:#f00000;width:2px;height:25px;}
li.ba3{color:#c00000;width:6px;height:25px;}
li.ba4{color:#a00000;border-bottom:solid 1px #cccccc;vertical-align:middle;width:auto;height:25px;}
li.ba5{color:#ff0000;width:6px;height:25px;margin-right:10px;}
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(25.01.2007 в 16:36)
| | | РЕСПЕКТ!
Что-то меня заклинило! | |
| |
|
|
