Блоки с автоматической шириной

[botyaslonim]

Помогите, не могу сообразить, как сделать.

Есть блок A шириной X и высотой Y.

Внутри него нужно разместить от одного до трёх внутренних блоков.

Условия: если внутренний блок один - то он должен растянуться на всю ширину блока А, если два - то они должны занять по половине ширины блока А, если три - по трети, ну и так далее...

Как сделать?

Edited September 24, 2010 by botyaslonim

[Vlad]

Таблица не подойдет?

[botyaslonim]

Хотелось бы без неё.

[Great Rash]

Почему? Назовите хоть одну объективную причину?

[botyaslonim]

Я понял, что таблицей это сделать просто

Меня интересует, есть ли вариант на дивах?

[psywalker]

Ровно прям не растянется, т.е. какая нибудь из колонок всё равно будет чуть больше, чем остальные.

[SelenIT]

А псевдотаблица (display: table-row с table-layout:fixed для контейнера, table-cell без указания ширины для внутренних блоков) — не решение? Правда, для IE7- всё равно понадобятся expression-ные костыли...

[Great Rash]

ТС, читайте внимательно подпись у psywalker'а. Если у вас остались еще сомнения читайте еще, если еще остались сомнения читайте снова...

И так до полного просветления!

[psywalker]

ТС, читайте внимательно подпись у psywalker'а. Если у вас остались еще сомнения читайте еще, если еще остались сомнения читайте снова...

И так до полного просветления!

+1

[Vlad]

Сомневаюсь, что на дивах чисто можно такое сделать. Они же не умеют считать сколько их. На JS можно еще реализовать. Так что возвращаясь к первому вопросу, может таблицами все-таки?

[psywalker]

А как вообще можно 100% поделить на 3 ровно?

[botyaslonim]

Кстати, продолжение заморочки.

Сверстал таблицами.

Получается вот что: блоки стоят не ровно друг к другу, а прыгают по высоте.

Вот возьмём Firefox.

2 блока - один выше, другой ниже:

3 блока - стоят все ровненько, как зайчики на полочке:

Ну а в Хроме ахтунг:

Чувствую, ошибка лоховская, но сообразить не могу.

Сдаюсь. Вот код:

<div class = "accent">
		<div class = "accent_inner">
			<table>
				<tr>			
					<th>
						<div class = "accent_item_logo">
							<img src = "img/item_1.png" title = "" alt = "Картинка"/>
						</div>
					</th>
					<td>
						<div class = "accent_item_text">
							<div class = "accent_item_names">
								<h4>Новинка</h4>
								<h3><a href = "p-b.html">Пропан-бутан</a></h3>
							</div>
							<p>
								Всесезонное минеральное моторное масло для двигателей, работающих на газовых смесях - пропан-бутан и метан
							</p>
						</div>
					</td>			
					<th>						
						<div class = "accent_item_logo">
							<img src = "img/item_2.png" title = "" alt = "Картинка"/>
						</div>
					</th>
					<td>
						<div class = "accent_item_text">
							<h4>Хит продаж</h4>
							<h3><a href = "polu-s.html">Полусинтетика<br/>
								(SAE 10W-40)</a></h3>
							<p>
								Многоцелевое полусинтетическое 
								моторное масло для карбюраторных и среднефорсированных дизельных
								двигателей без наддува
							</p>
						</div>
					</td>			
					<th>						
						<div class = "accent_item_logo">
							<img src = "img/item_3.png" title = "" alt = "Картинка"/>
						</div>
					</th>
					<td>
						<div class = "accent_item_text">
							<h4>Специальное предложение</h4>
							<h3><a href = "p-b.html">Пропан-бутан</a></h3>
							<p>
								Всесезонное минеральное моторное масло для двигателей, работающих на газовых смесях - пропан-бутан и метан
							</p>
						</div>
					</td>	 
				</tr>
			</table>
		</div>
	</div>

И CSS:

.accent
	{
		float:left;
		width:100%;
		height:275px;
		background:url('img/accent.png')top left no-repeat;			
	}
.accent_inner
	{		
		padding:43px 67px 0 93px;		
	}
.accent_item_logo
	{
		width:97px;
		float:left;
		margin-top:8px;		
	}
.accent_item_text
	{		
		font:12px 'Trebuchet MS',Arial,Helvetica,sans-serif;		
	}
.accent_inner th
	{
		padding:0 18px;
	}
.accent_item_text h4
	{
		font-size:10px;
		color:#ffb400;
		font:12px 'Trebuchet MS',Arial,Helvetica,sans-serif;
		letter-spacing:-0.11em;	
		text-decoration:underline;
	}
.accent_item_text h3
	{
		font:900 14px 'Trebuchet MS',Arial,Helvetica,sans-serif;
		padding-bottom:5px;
	}
.accent_item_text a
	{
		color:#26ace4;
		text-decoration:underline;
	}
.accent_item_text a:hover
	{
		color:red;
	}
.accent_item_text p
	{
		margin:0 2em 0 0;
		opacity:0.7;
	}

Edited September 24, 2010 by botyaslonim

[Vlad]

А как вообще можно 100% поделить на 3 ровно?

Никак, конечно же, если дотошно придираться. 100 это не 99, на три ровно не делится. Задать либо 33.3% каждой колонке, либо 33, 34, 33.

[psywalker]

ТС, vertical-align: top; не пробовал?

Никак, конечно же, если дотошно придираться. 100 это не 99, на три ровно не делится. Задать либо 33.3% каждой колонке, либо 33, 34, 33.

Жаль только что Опера не понимает дроби.

[botyaslonim]

Ага, спасибо. Попробовал - помогло

[psywalker]

Ага, спасибо. Попробовал - помогло

Отлично