Другие языки программирования и технологии

Вопрос по СSS

Здравствуйте. Возникла некоторая проблема, которая заключается в позиционировании двух и более блоков внутри другого. Дело в том, что при вставке двух блоков, один располагается под другим, что в мое случае не очень правильно. Пробовал использовать dispaly:inlain и display:inline-block- не помогает.

Код HTML:

<!DOCTYPE html>

<html lang="RU-ru">

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="styletable.css">

</head>

<body>

<!--Шапка-->

<div id="header">

<div id="logo">BlacTea</div><div id="text">Привет, друг</div>

</div>

<!--Левый блок-->

<div id="leftB">

</div>

<!--Контент-->

<div id="content">

</div>

<!--Правый блок-->

<div id="rightB">

</div>

<!--Низ сайта-->

<div id="niz">

</div>

</body>

</html>

CSS код:

html, body{

margin:0;

padding:0;

height:100%;

}

div{

position:relative;}

#logo{

line-height:10px;

text-align:center;

text-shadow:2px 2px;

font-size:40px;

}

#header{

background:red;

border:1px black solid;

border-radius:10px;

width:100%;

height:15%;

overflow:auto;

}

#leftB{

background:skyblue;

border:1px black solid;

border-radius:10px;

width:10%;

height:70%;

float:left;

}

#content{

background:skyblue;

border:1px black solid;

border-radius:10px;

width:79%;

height:70%;

float:left;

}

#rightB{

background:skyblue;

border:1px black solid;

border-radius:10px;

width:10%;

height:70%;

float:left;

}

#niz{

background:red;

border:1px black solid;

border-radius:10px;

width:100%;

height:10%;

clear:both;

}

#text{

position:absoulte;

s

}
Александр Кочерганов
Александр Кочерганов
392
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.header { background: DarkSeaGreen; padding: 5px; width: 800px; overflow: hidden; margin: 5px; }
.block { padding: 5px; height: 50px; }
.logo { background: LightCoral; width: 150px; font-size: 2.6em; }
.text { background: LightSteelBlue; width: 625px; }
#ex-1 { position: fixed; top: 0; }
#ex-11 { float: left; }
#ex-12 { float: right; }
#ex-2 { position: relative; top: 72px; }
#ex-21 { float: left; }
#ex-22 { display: inline-blok; margin-left: 165px; }
#ex-3 { position: relative; top: 72px; }
#ex-31 { float: left; }
#ex-32 { float: right; }
#ex-4 { position: absolute; top: 225px; height: 60px; }
#ex-41 { position: inherit; left: 5px; }
#ex-42 { position: inherit; left: 170px; }
</style>
</head>
<body>
<div id="ex-1" class="header">
<div id="ex-11" class="logo block">1</div>
<div id="ex-12" class="text block"></div>
</div>
<div id="ex-2" class="header">
<div id="ex-21" class="logo block">2</div>
<div id="ex-22" class="text block"></div>
</div>
<div id="ex-3" class="header">
<div id="ex-31" class="logo block">3</div>
<div id="ex-32" class="text block"></div>
</div>
<div id="ex-4" class="header">
<div id="ex-41" class="logo block">4</div>
<div id="ex-42" class="text block"></div>
</div>
</body>
</html>
Андрей Киндоп
Андрей Киндоп
86 572
Лучший ответ
А ты у какого блока display:inline задаешь? У header?
Если нужно по горизонтали выровнять два блока которые дочерние к header, тогда лучше задавать inline у них, а не у header.А у header оставить block
Токонбек -Бекташов
Токонбек -Бекташов
24 293
а dispaly:inlain и не поможет. нету такого. . .Попробуй inline

И по выложенному коду.. .
Разве недостаточно было выложить проблемный DIV и стили к нему? Я лично не понял, к каким блокам относится твой бред. Да и не пытался...
Александр Зайцев
Александр Зайцев
15 705
Так что ли?) ) http://jsfiddle.net/87XkZ/
AK
Alexey Kisselyov
9 098
А какие конкретно блоки нужно в линию поставить - это мы угадывать должны?
Если это блочные элементы, используй float:left. Вот так:

HTML:

<div id="div-1">
</div>
<div id="div-2">
</div>

CSS:

#div-1 {
width:100px;
}
#div-2 {
width:300px;
}
#div-1, #div-2 {
float:left;
}
Николай Коньков
Николай Коньков
876

Похожие вопросы