CSS - Дивове един до друг

V

valqka

Registered
Как да направя с CSS 3 див-а един до друг (хоризонтално), без да използвам <table> с <td> ? Благодаря предварително. :)
 
Самия код не трябва да го copy/paste, а първо го четеш и взимаш каквото ти трябва т.е. в този случай float:left;.
[css].divcomunity2 {
float:left;
}[/css]
За да не се "счупи" страницата слагай след последния float clear:both; т.е. сложи този код
HTML: 
<div style="clear:both"></div>
след посления:
HTML: 
<div class="divcomunity2">
<img src="test.png">
</div>
 
marian каза:
Самия код не трябва да го copy/paste, а първо го четеш и взимаш каквото ти трябва т.е. в този случай float:left;.
[css].divcomunity2 {
float:left;
}[/css]
За да не се "счупи" страницата слагай след последния float clear:both; т.е. сложи този код
HTML: 
<div style="clear:both"></div>
след посления:
HTML: 
<div class="divcomunity2">
<img src="test.png">
</div>
Увеличете...
Само 1 въпрос, това <div style="clear:both">, немогали го сложа в CSS-а и да не се чупят всичките дивове, как се бъват (2ри-въпрос) и защо се чупят.
Иначе 10x
 
Чупят се заради неизчистен float.
Този див трябва да го слагаш винаги, за да изчистваш floating-a. Т.е. когато си float-нал елемент и след това имаш друг код, за да не се "чупи" слагаш този див. Можеш да изнесеш стила в клас:
Код: 
.clear{
clear: both;
}

И да го ползваш по-лесно (уж):
Код: 
<div class='clear'></div>
 
Последен въпрос - дивовете станаха, обаче как да ги направя да са в центъра ? Пробвах с <center> ама нестава. :?
 
Демото не ти работи, иначе пробвай следното т.е. пример /червения текст/:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"/>
<title>блах-блах-блах</title>

<style>
html, body {
margin: 0;
padding: 0;
}

div.content {
width: 600px;
margin: 0 auto;
}

div.left_box {
background-color: #000;
width: 400px;
float: left;
color: #fff;
padding: 5px;
}

div.right_box {
background-color: #c0c0c0;
width: 180px;
float: left;
color: #fff;
padding: 5px;
}

div.footer {
background-color: red;
clear: both;
width: 590px;
padding: 5px;
}
</style>

</head>
<body>
<div class="content">
<div class="left_box">test</div>
<div class="right_box">test2</div>
<div class="footer">footer</div>
</div>
</body>
</html>
Увеличете...
 
Демото сега работи: http://213.91.132.35 ... (хоствам го аз на мой уебсървър просто за тест - докъто разработвам сайта и го спирам когато не ми трябва...) Ако можете погледнете кода и ми кажете къкво точно трябва да направя за да ги центрирам 3-те дива посредата да отидат?
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе