Выравнивание в Css

jsse · 01.05.2006, 16:47

Как можно выровнять по вертикали с помощью CSS?

Пример: у меня есть слой размером 400х400
в нем два слоя(блоки) размерами 50х50.

Задача: Первый блок поместить вверху слева, второй Внизу справа используя только CSS.

Uratsakidogi · 01.05.2006, 17:13

Для внешнего — position: relative; для внутренних — position: absolute и top:0; right: 0; и bottom: 0; right: 0; соответственно.

sl_play · 01.05.2006, 17:59

делаешь таблицу из четырёх ячеек, все ячейки 50/50%
задействуешь левую сверху и правую снизу...

Uratsakidogi · 01.05.2006, 18:10

sl_play, во-первых из девяти (посмотри на необходимые размеры). А во-вторых, «используя только CSS».

jsse · 01.05.2006, 18:14

Сделал блоки, но если добавить текст, то они не обтекаются.
Как добиться, чтоб текст обтекал эти блоки?

Пример моего кода.

PHP код:


			
<html>



<style>

   .main {

     background: red;

     width: 500px;

     position: relative;

   }



  .one {

    background: blue;

    position: absolute;

    left: 0px;

    top: 0px;

    width: 150px;

    height: 150px;

  }

  

  .two {

    background: green;

    position: absolute;

    right: 150px;

    bottom: 0px;

    width: 200px;

    height: 50px;

  }

  

  .three {

    background: gray;

    position: absolute;

    bottom: 0px;

    right: 0px;

    width: 150px;

    height: 150px;    

  }  

</style>



<div class="main">



     <div>

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text       

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text       

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text       

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text       

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text       

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text       

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text

       text text text text text text text text text text text text text text text text text text text 

       text text text text text text text text text text text text text text text text text text text  

     </div>

    

    <div class="one">

      1     

    </div>

    

    <div class="two">

      2

    </div>



    <div class="three">

      3

    </div>

    

    

</div>



</html>

sl_play · 01.05.2006, 18:15

можешь ходить за собой по пятам, можешь пытаться прыгать выше себя, даже доставать левойо ногой правого уха, или же ходить всегда в обход.
Нормальные люди пойдут прямо и сделают что-то более достойное, потому что они не усложняют себе жизнь, а стремятся к цели...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Выравнивание текста	WWF	Кальянная	19	13.08.2009 22:04
Выравнивание дива	MarShall	HTML, CSS, JavaScript	8	30.03.2009 17:59
Выравнивание	itan	HTML, CSS, JavaScript	5	16.01.2009 20:49
Выравнивание страницы	Брат	HTML, CSS, JavaScript	11	09.04.2008 09:48
img в div выравнивание по вертикали	rubanok	HTML, CSS, JavaScript	5	22.06.2006 19:41

01.05.2006, 16:47	#1
jsse	Как можно выровнять по вертикали с помощью CSS? Пример: у меня есть слой размером 400х400 в нем два слоя(блоки) размерами 50х50. Задача: Первый блок поместить вверху слева, второй Внизу справа используя только CSS.

01.05.2006, 17:13	#2
Uratsakidogi	Для внешнего — position: relative; для внутренних — position: absolute и top:0; right: 0; и bottom: 0; right: 0; соответственно.

01.05.2006, 17:59	#3
sl_play	делаешь таблицу из четырёх ячеек, все ячейки 50/50% задействуешь левую сверху и правую снизу...

01.05.2006, 18:10	#4
Uratsakidogi	sl_play, во-первых из девяти (посмотри на необходимые размеры). А во-вторых, «используя только CSS».

01.05.2006, 18:14	#5
jsse	Сделал блоки, но если добавить текст, то они не обтекаются. Как добиться, чтоб текст обтекал эти блоки? Пример моего кода. PHP код: <html> <style> .main { background: red; width: 500px; position: relative; } .one { background: blue; position: absolute; left: 0px; top: 0px; width: 150px; height: 150px; } .two { background: green; position: absolute; right: 150px; bottom: 0px; width: 200px; height: 50px; } .three { background: gray; position: absolute; bottom: 0px; right: 0px; width: 150px; height: 150px; } </style> <div class="main"> <div> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> <div class="one"> 1 </div> <div class="two"> 2 </div> <div class="three"> 3 </div> </div> </html>

01.05.2006, 18:15	#6
sl_play	можешь ходить за собой по пятам, можешь пытаться прыгать выше себя, даже доставать левойо ногой правого уха, или же ходить всегда в обход. Нормальные люди пойдут прямо и сделают что-то более достойное, потому что они не усложняют себе жизнь, а стремятся к цели...