Простой вопрос о обтекании
Стыдно такое спрашивать, наверно. Но, почему красные блоки не обтекают в одну колонку зеленый? Флоаты заданы, у каждого красного clear: right.
По идеи они должны обтекать зеленый и запрещать обтекать себя справа. Не то, не другое не выполняется.
<style>
.d1 {
position: relative;
width: 200px;
height: 700px;
background-color: green;
}
.d2 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d3 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d4 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
</style>
<body>
<div class='d1'></div><div class="d2"> </div><div class="d3"> </div><div class="d4"> </div>
</body>
|
<style>
.d1 {
position: relative;
width: 200px;
height: 700px;
float: left;
background-color: green;
}
.d2 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d3 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d4 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
</style>
<body>
<div class='d1'></div><div class="d2"> </div><div class="d3"> </div><div class="d4"> </div>
</body>
PS: тут можно задавать высоту окна просмотра [html run height=500] |
bes,
Но ведь они все так же обтекают в один рядок, а надо в столбец. Эм. Столбец это же колонка? Что-то я подвис... И реально ли обойтись без флоата? Я так понял, что проблема в том, что блочный элемент занимает всю ширину, не? Вот как-то так, но что-то мне не нравиться, слишком много костылей.
<style>
.d1 {
float: left;
width: 200px;
height: 700px;
background-color: green;
}
.d2 {
clear:right;
margin-left: 200px;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d3 {
clear:right;
margin-left: 200px;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d4 {
clear:right;
margin-left: 200px;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d11 {
position: absolute;
width: 200px;
height: 700px;
background-color: gray;
}
.d22 {
clear:right;
margin-left: 200px;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d33 {
clear:right;
margin-left: 200px;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d44 {
clear:right;
margin-left: 200px;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
</style>
<body>
<div class='d1'></div><div class="d2"> </div><div class="d3"> </div><div class="d4"> </div>
<div style="clear: both"></div>
<div class='d11'></div><div class="d22"> </div><div class="d33"> </div><div class="d44"> </div>
</body>
|
PashPP, - Cоррь за Oффтоп,
bes, Cмотри - вродь получилось
<!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" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Общие вопросы</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#tableId0,#tableId1{
border-collapse:collapse!important;
}
#div0{
position:absolute;
width:100%;
height:50%;
border:red 1px solid;
}
#div1{
position:absolute;
margin-top:4px;
top:50%;
width:100%;
height:50%;
border:blue 1px solid;
}
span#Scroll{
border:red 2px solid!important;
display:inline-block;
position:absolute;
margin-top:0px;
margin:0;
width:50%;
height:100%!important;
overflow-y:auto;
}
</style>
</head>
<body>
<div id=div0>
<table id="tableId0" border="1" style="width:100%;height:100%;">
<tbody>
<tr style=width:100%;height:50%"><td>ячейка 1</td><td>ячейка 2</td></tr>
</tbody>
</table>
</div>
<div id=div1>
<table id="tableId1" border="1" style="width:100%;height:100%;">
<tbody>
<tr valign=top style=width:100%;height:50%"><td width=50%;>ячейка 1</td><td><span id=Scroll>
<div style="width:100%;height:110%;">ячейка 1</div>
</span></td></tr>
</tbody>
</table>
</div>
</body>
</html>
Чуть Вылезает за счет проставки бордеров |
да display: inline-block тут в тему, таблица, или display: table-cell, можно также абсолютно всё запозиционировать
с float-ми вечно заморочка, где право, где лево, clear: right тут вообще ни к чему, так как float: right не задавался и отменять нечего, float: left предыдущего и текущего позволяют элементам обтекать друг друга, если запретить у одного, то он не сможет обтекать и все остальные и поэтому сместится вниз |
Deff, имеется в виду удержать таблицу в рамках экрана при масштабировании?
|
bes,
Ну вопрос про скроллблок был ( всё держал в голове, внизу справо - красным |
Deff, жесть :)
|
PashPP, пару хороших статей про float-ы
http://learn.javascript.ru/float http://habrahabr.ru/post/142486/ |
| Часовой пояс GMT +3, время: 05:12. |