Форум

debugx · #1 (**permalink**) 16.09.2011, 16:41

Всем привет,
есть три дива

<div>
	<div style="float:left;">
	<div style="float:left;">
	<div style="float:right;">
</div>

хочу чтобы первый был в самой левой позиции,
второй - посередине
третий -в самой правой.
Как это сделать?

margin: 0 auto не работает для плавающих элементов.
понятно можно в таблице сделать, но вопрос, как сделать в дивах.

Спасибо.

kadabrik · #2 (**permalink**) 16.09.2011, 17:00

задай им размеры

debugx · #3 (**permalink**) 16.09.2011, 17:25

Сообщение от kadabrik

задай им размеры

в них текст пременной длины. Задать размеры нельзя.
Остается только таблицей?

melky · #4 (**permalink**) 16.09.2011, 17:48

ололо

никаких таблиц!

можно назначить ширину родительскому диву и ширину каждому из дочерних

типа такого

<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.

planod · #5 (**permalink**) 01.10.2011, 22:54

Попробуйте

<div> 
	    <div style="float:left;"> 
	    <div style="float:left;"> 
	    <div style="float:left;"> 
</div>

Seva1986 · #6 (**permalink**) 06.10.2011, 00:44

debugx,

Способов море...

раз уж хотите с флоатами то первый влево, второй вправо третий без флоата margin: 0 auto; и размер им нужный указать...

Magneto · #7 (**permalink**) 06.10.2011, 02:06

<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>

ksa · #8 (**permalink**) 06.10.2011, 08:58

Magneto, автору нужно без размеров...

Сообщение от Seva1986

и размер им нужный указат

автору нужно без размеров...

Seva1986 · #9 (**permalink**) 06.10.2011, 09:05

Сообщение от ksa

Magneto, автору нужно без размеров...

автору нужно без размеров...

а ясно, ок щас занят вечером напишу...

Seva1986 · #10 (**permalink**) 06.10.2011, 12:03

<!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 ослов врятли но в задаче и не говорилось, да и есть костыли для них....

Форум

Справочник

Discord чат

Курсы javascript