Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2012, 13:14
Профессор
Отправить личное сообщение для PashPP Посмотреть профиль Найти все сообщения от PashPP
 
Регистрация: 26.07.2012
Сообщений: 281

Простой вопрос о обтекании
Стыдно такое спрашивать, наверно. Но, почему красные блоки не обтекают в одну колонку зеленый? Флоаты заданы, у каждого красного 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>
Ответить с цитированием
  #2 (permalink)  
Старый 27.08.2012, 13:28
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<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]
Ответить с цитированием
  #3 (permalink)  
Старый 27.08.2012, 13:44
Профессор
Отправить личное сообщение для PashPP Посмотреть профиль Найти все сообщения от PashPP
 
Регистрация: 26.07.2012
Сообщений: 281

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>
Ответить с цитированием
  #4 (permalink)  
Старый 27.08.2012, 14:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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>

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

Последний раз редактировалось Deff, 27.08.2012 в 14:41.
Ответить с цитированием
  #5 (permalink)  
Старый 27.08.2012, 14:33
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

да display: inline-block тут в тему, таблица, или display: table-cell, можно также абсолютно всё запозиционировать
с float-ми вечно заморочка, где право, где лево, clear: right тут вообще ни к чему, так как float: right не задавался и отменять нечего, float: left предыдущего и текущего позволяют элементам обтекать друг друга, если запретить у одного, то он не сможет обтекать и все остальные и поэтому сместится вниз
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2012, 14:38
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Deff, имеется в виду удержать таблицу в рамках экрана при масштабировании?
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2012, 14:42
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

bes,
Ну вопрос про скроллблок был ( всё держал в голове, внизу справо - красным
Ответить с цитированием
  #8 (permalink)  
Старый 27.08.2012, 15:02
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Deff, жесть
Ответить с цитированием
  #9 (permalink)  
Старый 27.08.2012, 15:30
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
простой вопрос makcstroi Общие вопросы Javascript 5 06.08.2012 13:21
Простой вопрос sedila jQuery 1 25.06.2012 07:32
простой вопрос по Ajax kichSman jQuery 6 26.04.2012 01:42
Простой вопрос yuri.gordeev Общие вопросы Javascript 5 10.02.2012 14:31
Простой вопрос onClick alex2001 Элементы интерфейса 3 11.07.2010 18:19