Выравнять три дива в одной строке
Всем привет,
есть три дива <div> <div style="float:left;"> <div style="float:left;"> <div style="float:right;"> </div> хочу чтобы первый был в самой левой позиции, второй - посередине третий -в самой правой. Как это сделать? margin: 0 auto не работает для плавающих элементов. понятно можно в таблице сделать, но вопрос, как сделать в дивах. Спасибо. |
задай им размеры
|
Цитата:
Остается только таблицей? |
ололо
никаких таблиц! можно назначить ширину родительскому диву и ширину каждому из дочерних типа такого <style>
* {margin0:padding:0}
.wrap {
width:90%;
border: 1px black dashed;
overflow: hidden;
padding: 2px 0;
}
.element {
float: left;
width:31%;
text-align:center;
border:1px red solid;
margin: 0 5px;
}
</style>
<div class="wrap">
<div class="element">klklk</div>
<div class="element">klklk</div>
<div class="element">klklk</div>
</div>
в процентах. или в EM. |
Попробуйте
<div> <div style="float:left;"> <div style="float:left;"> <div style="float:left;"> </div> |
debugx,
Способов море... раз уж хотите с флоатами то первый влево, второй вправо третий без флоата margin: 0 auto; и размер им нужный указать... |
<html><head>
<style>
*{
margin:0;
padding:0}
div{
width:120px;
height:80px;
position:absolute;
top:10px}
#red{
left:25%;
margin-left:-90px;
background:red}
#green{
left:50%;
margin-left:-60px;
background:green}
#blue{
left:75%;
margin-left:-30px;
background:blue}
</style>
</head><body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body></html>
|
Magneto, автору нужно без размеров... :)
Цитата:
|
Цитата:
а ясно, ок щас занят вечером напишу... |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Тест</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body>div{
margin-bottom:20px;
}
[id^="string"]>div{
border:1px solid red;
}
#string{
display:table;
width:100%;
}
#string>div{
display:table-cell;
text-align:center;
}
#string1{
display:table;
width:100%;
}
#string1>div{
display:table-cell;
text-align:center;
}
#string1>div:first-child{
text-align:left;
}
#string1>div:last-child{
text-align:right;
}
#string2{
text-align:justify;
font-size:0;
}
#string2:after{
content:"";
width:100%;
display:inline-block;
}
#string2>div{
font-size:16px;
display:inline-block;
}
#string3:after{
content:"";
clear:both;
display:block;
}
#string3>div{
float:right;
}
#string3>div:first-child{
float:left;
}
#string3>div:last-child{
float:none;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div id="string">
<div>Текст Текст Текст Текст Текст Текст Текст Текст</div>
<div>Текст Текст Текст Текст Текст</div>
<div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</div>
</div>
<div id="string1">
<div>Текст Текст Текст Текст Текст Текст Текст Текст</div>
<div>Текст Текст Текст Текст Текст</div>
<div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</div>
</div>
<div id="string2">
<div>Текст Текст Текст Текст Текст Текст Текст Текст</div>
<div>Текст Текст Текст Текст Текст</div>
<div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</div>
</div>
<div id="string3">
<div>Текст Текст Текст Текст Текст Текст Текст Текст</div>
<div>Текст Текст Текст Текст Текст</div>
<div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</div>
</div>
</body>
</html>
на счёт 6-7 ослов врятли но в задаче и не говорилось, да и есть костыли для них.... |
| Часовой пояс GMT +3, время: 03:48. |