Jump to content
  • 0

Выстроить таблицы в ряд от левого края

ХОЛОДный

Asked by ХОЛОДный,

 Share

Question

ХОЛОДный Explorer

ХОЛОДный

Posted
Posted

Добрый день есть следующая проблема:

question.png

Фиксированную высоту табличке (голубой прямоугольник) задавать нельзя.

По-разному пробовал, не помогает. У всех табличек прописан float:left;

Таблички, как видно из рисунка, расположены в ячейке таблички.

Спасибо!

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted 
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style type="text/css">
	*{ margin:0; padding: 0; vertical-align: top;}
	table { border-collapse: collapse;}
	table.table { width: 100%;}
		table td { vertical-align: top;}
		table.table div{ 
			width: 200px; 

			background: blue; 
			display: inline-block;

			margin-right: 20px;
			margin-bottom: 20px;
		}
		table.table table{ 
			width: 200px; 
			background: blue;
			display: inline-block;

			margin-right: 20px;
			margin-bottom: 20px;
		}
	</style>
		<!--[if lte IE 7]>
	<style type="text/css">
		table.table div,
		table.table table{display: inline;}

	</style>
	<![endif]-->
</head>
<body>
	<table class="table">
		<tr>
			<td>
			<div>
	<table>
		<tr>
			<td>


Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.

Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.


			</td>
		</tr>
	</table>
	</div>
	<div>
	<table>
		<tr>
			<td>


Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.

Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.


			</td>
		</tr>
	</table>
	</div>
	<div>
	<table>
		<tr>
			<td>


Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.

Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.


			</td>
		</tr>
	</table>
	</div>
	<div>
	<table>
		<tr>
			<td>


Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.

Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.


			</td>
		</tr>
	</table>
	</div>
	<div>
	<table>
		<tr>
			<td>



Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.



			</td>
		</tr>
	</table>
	</div>
	<div>
	<table>
		<tr>
			<td>



Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.

Lorem ipsum dolor sit amet consectetuer pharetra urna convallis vitae Vestibulum. Nunc Integer leo ac In Aenean elit orci id commodo urna. Convallis massa Nulla lacus elit Nulla quis facilisis.

Sed Aliquam neque tincidunt ligula dictumst libero ut pretium tristique et. A dui non laoreet urna Aliquam condimentum id mus tempus eu. Vel Curabitur Aenean Duis Morbi Sed egestas elit lobortis feugiat Morbi. Eget Fusce sollicitudin vel mus consectetuer porttitor laoreet id ut Maecenas. Pharetra.

			</td>
		</tr>
	</table>
	</div>			
			</td>
		</tr>
	</table>
</body>
</html>

Link to comment
Share on other sites
  • 0
ХОЛОДный Explorer

ХОЛОДный

Posted
  • Author
Posted (edited)
Хаа, ну ещё бы :)

В процессе тестирования, выявил следующую фичу:

table.table div{
			width: 200px;

			background: blue;
			display: inline-block;

			margin-right: 20px;
			margin-bottom: 20px;
		}

В IE 7.0 при включении свойства display: inline-block;

все элементы выравниваются по-левому краю. Если свойство убрать, то данные отображаются верно - в ряд, слева направо, перепрыгивают на новую строку, если не умещаются на одной, и так же выстраиваются слева направо.

Однако, без display: inline-block; в Мозилле 3.5 возникает обратная ситуация - все элементы выстраиваются по-левому краю.

Как быть?

Ваш пример, естественно, работает нормально во всех браузерах.

Дело в том, что внутри конечной таблички-элемента у меня есть несколько строк: картинка + 2 три строки текста.

Я вычитал, что ie7 не обрабатывает нормально inline-block.

Какие могут быть css-наводки, приводящие к тому, что верстка сбивается?

Если я в ваш пример вставляю копи-пастом свои фрагменты (заменю ваши div с табличкой на свои), то работает только с этим костылем:

 
<!--[if lte IE 7]>
	<style type="text/css">
		table.table div,
		table.table table{display: inline;}

	</style>

<![endif]-->

Мой div, никаких дополнительных классов не подключаю.

<div>

<table>

<tbody><tr>

<td>

<img src="/images/lacquers/1259540242_Sapphire_in_the_Snow.png?1259540242" onmouseover="displayDescr(this)" onmouseout="hideDescr()" descr="" alt="Sapphire in the Snow"/>

</td>

</tr>

<tr>

<td style="font-size: 1.15em;">

Holiday wishes

</td>

</tr>

<tr>

<td style="padding-top: 0.5em; padding-bottom: 0.5em; line-height: 1.5em;">

<div style="font-size: 1.3em;">Sapphire in the Snow</div>

</td>

</tr>

<tr>

<td>

<div style="font-size: 1.15em;">Cream</div>

</td>

</tr>

<tr>

<td style="vertical-align: bottom;" class="price">

<div class="priceRur">

330.0<img style="vertical-align: bottom;" src="/images/rouble_28px.png?1259509160" alt="Rouble_28px"/>

</div>

</td>

</tr>

<tr>

<td class="cartAction">

<span itemid="66" class="inBag">

В корзину

</span>

</td>

</tr>

</tbody></table>

</div>

Edited by ХОЛОДный
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept