| |
|
|
| | Вот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Shop</title>
<link rel="stylesheet" type="text/css" media="all" href="dump.css">
</head>
<body>
<div id="one">
</div>
<div id="two">
</div>
</body>
</html>
|
Вот css:
body {margin: 0px; }
#one {height: 50px; width: 100px; background: orange; margin: 0px;}
#two {height: 30px; width: 100px; background: green; margin: 0px; display: inline;}
|
Второй див просто исчезает вместо того, чтобы переместиться вправо. Почему? | |
| |
|
|
| |
|
|
| |
для: dump
(18.02.2012 в 07:10)
| | | > Второй див просто исчезает
Потому что inline означает что это больше не блок, а строка. А у строки не задается ширина и высота. Они вычисляются по ширине и высоте содержимого. А содержимого у вас ноль. Поэтому и ширина и высота 0.
Напишите <div id="two">lsdajkfghsjdfhglsjkdfhglksdfg</div> и он появится, но не так как вы ожидали. Чтоб ему можно было задать ширину и высоту он должен быть inline-block
> вместо того, чтобы переместиться вправо
А почему он собственно должен переместиться вправо? Он будет под #one, т.к. display:block по умолчанию означает, что он занимает всю строку. Отображается он может и не на всю строку, но на той же строке что и он больше ничего располагаться не может. Если вы хотите, чтоб #two был справа от #one, то для #one нужно еще прописать float:left | |
| |
|
|
