Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.09.2011, 15:41
Аспирант
Отправить личное сообщение для debugx Посмотреть профиль Найти все сообщения от debugx
 
Регистрация: 24.05.2011
Сообщений: 40

Выравнять три дива в одной строке
Всем привет,
есть три дива
<div>
	<div style="float:left;">
	<div style="float:left;">
	<div style="float:right;">
</div>

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

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

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 16.09.2011, 16:00
Аватар для kadabrik
Кандидат Javascript-наук
Отправить личное сообщение для kadabrik Посмотреть профиль Найти все сообщения от kadabrik
 
Регистрация: 10.12.2010
Сообщений: 114

задай им размеры
Ответить с цитированием
  #3 (permalink)  
Старый 16.09.2011, 16:25
Аспирант
Отправить личное сообщение для debugx Посмотреть профиль Найти все сообщения от debugx
 
Регистрация: 24.05.2011
Сообщений: 40

Сообщение от kadabrik Посмотреть сообщение
задай им размеры
в них текст пременной длины. Задать размеры нельзя.
Остается только таблицей?
Ответить с цитированием
  #4 (permalink)  
Старый 16.09.2011, 16:48
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

ололо

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

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

типа такого

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

Последний раз редактировалось melky, 16.09.2011 в 16:51.
Ответить с цитированием
  #5 (permalink)  
Старый 01.10.2011, 21:54
Новичок на форуме
Отправить личное сообщение для planod Посмотреть профиль Найти все сообщения от planod
 
Регистрация: 28.09.2011
Сообщений: 5

Попробуйте
<div> 
	    <div style="float:left;"> 
	    <div style="float:left;"> 
	    <div style="float:left;"> 
</div>
Ответить с цитированием
  #6 (permalink)  
Старый 05.10.2011, 23:44
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

debugx,

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

раз уж хотите с флоатами то первый влево, второй вправо третий без флоата margin: 0 auto; и размер им нужный указать...
Ответить с цитированием
  #7 (permalink)  
Старый 06.10.2011, 01:06
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

<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>
Ответить с цитированием
  #8 (permalink)  
Старый 06.10.2011, 07:58
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,776

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

Сообщение от Seva1986
и размер им нужный указат
автору нужно без размеров...
Ответить с цитированием
  #9 (permalink)  
Старый 06.10.2011, 08:05
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

Сообщение от ksa Посмотреть сообщение
Magneto, автору нужно без размеров...


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


а ясно, ок щас занят вечером напишу...
Ответить с цитированием
  #10 (permalink)  
Старый 06.10.2011, 11:03
Профессор
Отправить личное сообщение для Seva1986 Посмотреть профиль Найти все сообщения от Seva1986
 
Регистрация: 01.10.2011
Сообщений: 422

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Несколько созданных элементов располагаются в одной строке. Как этого избежать? Hold Events/DOM/Window 1 21.01.2011 22:52