Здравствуйте. Возникла некоторая проблема, которая заключается в позиционировании двух и более блоков внутри другого. Дело в том, что при вставке двух блоков, один располагается под другим, что в мое случае не очень правильно. Пробовал использовать 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
}
Другие языки программирования и технологии
Вопрос по СSS
<!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>
<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>
А ты у какого блока display:inline задаешь? У header?
Если нужно по горизонтали выровнять два блока которые дочерние к header, тогда лучше задавать inline у них, а не у header.А у header оставить block
Если нужно по горизонтали выровнять два блока которые дочерние к header, тогда лучше задавать inline у них, а не у header.А у header оставить block
а dispaly:inlain и не поможет. нету такого. . .Попробуй inline
И по выложенному коду.. .
Разве недостаточно было выложить проблемный DIV и стили к нему? Я лично не понял, к каким блокам относится твой бред. Да и не пытался...
И по выложенному коду.. .
Разве недостаточно было выложить проблемный DIV и стили к нему? Я лично не понял, к каким блокам относится твой бред. Да и не пытался...
Так что ли?) ) http://jsfiddle.net/87XkZ/
А какие конкретно блоки нужно в линию поставить - это мы угадывать должны?
Если это блочные элементы, используй 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;
}
Если это блочные элементы, используй 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;
}
Похожие вопросы
- Как очистить стиль потомка в СSS
- Объясните что такое PHP - что это за инструмент. Приведите пример Сss - мне понятно для чего, а PHP чем облегчает жизнь?
- Вопрос ПРОФЕССИОНАЛЬНЫМ или просто ОПЫТНЫМ программистам
- вопросы на засыпку С# и другие ООП языки
- Вопрос касается искусственного интеллекта. В чём грань между испытанием роботом настоящих эмоций и имитацией их?
- Помогите пожалуйста разобраться с вопросами по информатике и программированию
- доброе утро программисти вопрос в нутри вопрос какой язык вибрать помогите кто чем сможеть
- Вопрос о тенденциях современного программирования...
- Вопрос не по коду, а по работе :)
- Хочу узнать некоторые вопросы по поводу ЯЗЫКОВ ПРОГРАММИРОВАНИЯ