Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Простой вопрос о обтекании (https://javascript.ru/forum/xhtml-html-css/31114-prostojj-vopros-o-obtekanii.html)

PashPP 27.08.2012 13:14

Простой вопрос о обтекании
 
Стыдно такое спрашивать, наверно. Но, почему красные блоки не обтекают в одну колонку зеленый? Флоаты заданы, у каждого красного 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>

bes 27.08.2012 13:28

<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]

PashPP 27.08.2012 13:44

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>

Deff 27.08.2012 14:09

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>

Чуть Вылезает за счет проставки бордеров

bes 27.08.2012 14:33

да display: inline-block тут в тему, таблица, или display: table-cell, можно также абсолютно всё запозиционировать
с float-ми вечно заморочка, где право, где лево, clear: right тут вообще ни к чему, так как float: right не задавался и отменять нечего, float: left предыдущего и текущего позволяют элементам обтекать друг друга, если запретить у одного, то он не сможет обтекать и все остальные и поэтому сместится вниз

bes 27.08.2012 14:38

Deff, имеется в виду удержать таблицу в рамках экрана при масштабировании?

Deff 27.08.2012 14:42

bes,
Ну вопрос про скроллблок был ( всё держал в голове, внизу справо - красным

bes 27.08.2012 15:02

Deff, жесть :)

bes 27.08.2012 15:30

PashPP, пару хороших статей про float-ы
http://learn.javascript.ru/float
http://habrahabr.ru/post/142486/


Часовой пояс GMT +3, время: 15:36.