Jump to content
  • 0

Высота блока

Bredova

Asked by Bredova,

 Share

Question

Bredova Explorer

Bredova

Posted
Posted

Есть такая навороченная страница

http://fluke-rf.ru/index.php?id=3

Проблема в том, что серые блоки разной высоты, и если внутри блока почти нет текста - блоки начинают некрасиво налазить друг на друга.

Подскажите, как справиться и сделать так, чтобы блоки не наезжали?

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
IIAIIIA Explorer

IIAIIIA

Posted
Posted (edited)

У вас есть некоторые проблемы с пониманием верстки. Лень было исправлять вашу верстку, поэтому сделал все с нуля.

Обратите внимание на мелочи вроде h3>a, а не a.h3

В итоге у вас куча классов, непонятных и ненужных элементов.


.catalog_list{
	list-style-type: none;
}
.catalog_list li{
	margin-bottom: 20px;
}
.catalog_list li:after{
	content: "";
	display: block;
	clear: both;
}
.catalog_list .product-photo{
	border: 2px solid #E9A900;
	float: left;
}
.catalog_list .product-content{
	background: none repeat scroll 0 0 #EFEFEF;
	border: 2px solid #BABABA;
	padding: 40px;
	margin-left: 140px;
}


<ul class="catalog_list">
	<li>
		<a href="#"><img src="http://fluke-rf.ru/assets/images/noimage.jpg" alt="" class="product-photo" /></a>
		<div class="product-content">
			<h3>
				<a href="#">Термопары и аксессуары для измерения температуры</a>
			</h3>
			<a title="FLUKE 80РК-22" href="/index.php?id=138">FLUKE 80РК-22</a> / 
			<a title="FLUKE 80РК-24" href="/index.php?id=139">FLUKE 80РК-24</a> / 
			<a title="FLUKE 80РК-25 И 80РТ-25" href="/index.php?id=140">FLUKE 80РК-25 И 80РТ-25</a> / 
			<a title="FLUKE 80РК-26" href="/index.php?id=141">FLUKE 80РК-26</a> / 
			<a title="FLUKE 80RK-27" href="/index.php?id=142">FLUKE 80RK-27</a> / 
			<a title="FLUKE 80RK-1-1 AND 80RJ" href="/index.php?id=143">FLUKE 80RK-1-1 AND 80RJ</a> / 
			<a title="FLUKE 80РК-3А" href="/index.php?id=144">FLUKE 80РК-3А</a> / 
			<a title="FLUKE 80РК-8" href="/index.php?id=145">FLUKE 80РК-8</a> / 
			<a title="FLUKE 80РК-9 И 80PJ-9" href="/index.php?id=146">FLUKE 80РК-9 И 80PJ-9</a> / 
			<a title="FLUKE 80РК-11" href="/index.php?id=147">FLUKE 80РК-11</a> / 
			<a title="FLUKE 80АК-А" href="/index.php?id=148">FLUKE 80АК-А</a> / 
			<a title="FLUKE 80ВК-А" href="/index.php?id=149">FLUKE 80ВК-А</a> / 
			<a title="FLUKE 80ТК" href="/index.php?id=150">FLUKE 80ТК</a> / 
			<a title="FLUKE  80Т-150U" href="/index.php?id=151">FLUKE  80Т-150U</a> / 
			<a title="FLUKE  80PR-60 RTD" href="/index.php?id=152">FLUKE  80PR-60 RTD</a> / 
			<a title="FLUKE 80РК-EXT" href="/index.php?id=153">FLUKE 80РК-EXT</a> / 
		</div>
	</li>
	<li>
		<a href="#"><img src="http://fluke-rf.ru/assets/images/noimage.jpg" alt="" class="product-photo" /></a>
		<div class="product-content">
			<h3>
				<a href="#">Термопары и аксессуары для измерения температуры</a>
			</h3>
			<a title="FLUKE 80РК-22" href="/index.php?id=138">FLUKE 80РК-22</a> / 
			<a title="FLUKE 80РК-24" href="/index.php?id=139">FLUKE 80РК-24</a> / 
			<a title="FLUKE 80РК-25 И 80РТ-25" href="/index.php?id=140">FLUKE 80РК-25 И 80РТ-25</a> / 
			<a title="FLUKE 80РК-26" href="/index.php?id=141">FLUKE 80РК-26</a> / 
			<a title="FLUKE 80RK-27" href="/index.php?id=142">FLUKE 80RK-27</a> / 
			<a title="FLUKE 80RK-1-1 AND 80RJ" href="/index.php?id=143">FLUKE 80RK-1-1 AND 80RJ</a> / 
			<a title="FLUKE 80РК-3А" href="/index.php?id=144">FLUKE 80РК-3А</a> / 
			<a title="FLUKE 80РК-8" href="/index.php?id=145">FLUKE 80РК-8</a> / 
			<a title="FLUKE 80РК-9 И 80PJ-9" href="/index.php?id=146">FLUKE 80РК-9 И 80PJ-9</a> / 
			<a title="FLUKE 80РК-11" href="/index.php?id=147">FLUKE 80РК-11</a> / 
			<a title="FLUKE 80АК-А" href="/index.php?id=148">FLUKE 80АК-А</a> / 
			<a title="FLUKE 80ВК-А" href="/index.php?id=149">FLUKE 80ВК-А</a> / 
			<a title="FLUKE 80ТК" href="/index.php?id=150">FLUKE 80ТК</a> / 
			<a title="FLUKE  80Т-150U" href="/index.php?id=151">FLUKE  80Т-150U</a> / 
			<a title="FLUKE  80PR-60 RTD" href="/index.php?id=152">FLUKE  80PR-60 RTD</a> / 
			<a title="FLUKE 80РК-EXT" href="/index.php?id=153">FLUKE 80РК-EXT</a> / 
			<a title="FLUKE 80РК-22" href="/index.php?id=138">FLUKE 80РК-22</a> / 
			<a title="FLUKE 80РК-24" href="/index.php?id=139">FLUKE 80РК-24</a> / 
			<a title="FLUKE 80РК-25 И 80РТ-25" href="/index.php?id=140">FLUKE 80РК-25 И 80РТ-25</a> / 
			<a title="FLUKE 80РК-26" href="/index.php?id=141">FLUKE 80РК-26</a> / 
			<a title="FLUKE 80RK-27" href="/index.php?id=142">FLUKE 80RK-27</a> / 
			<a title="FLUKE 80RK-1-1 AND 80RJ" href="/index.php?id=143">FLUKE 80RK-1-1 AND 80RJ</a> / 
			<a title="FLUKE 80РК-3А" href="/index.php?id=144">FLUKE 80РК-3А</a> / 
			<a title="FLUKE 80РК-8" href="/index.php?id=145">FLUKE 80РК-8</a> / 
			<a title="FLUKE 80РК-9 И 80PJ-9" href="/index.php?id=146">FLUKE 80РК-9 И 80PJ-9</a> / 
			<a title="FLUKE 80РК-11" href="/index.php?id=147">FLUKE 80РК-11</a> / 
			<a title="FLUKE 80АК-А" href="/index.php?id=148">FLUKE 80АК-А</a> / 
			<a title="FLUKE 80ВК-А" href="/index.php?id=149">FLUKE 80ВК-А</a> / 
			<a title="FLUKE 80ТК" href="/index.php?id=150">FLUKE 80ТК</a> / 
			<a title="FLUKE  80Т-150U" href="/index.php?id=151">FLUKE  80Т-150U</a> / 
			<a title="FLUKE  80PR-60 RTD" href="/index.php?id=152">FLUKE  80PR-60 RTD</a> / 
			<a title="FLUKE 80РК-EXT" href="/index.php?id=153">FLUKE 80РК-EXT</a> / 
		</div>
	</li>
	<li>
		<a href="#"><img src="http://fluke-rf.ru/assets/images/noimage.jpg" alt="" class="product-photo" /></a>
		<div class="product-content">
			<h3>
				<a href="#">Термопары и аксессуары для измерения температуры</a>
			</h3>
			<a title="FLUKE 80РК-22" href="/index.php?id=138">FLUKE 80РК-22</a> / 
			<a title="FLUKE 80РК-24" href="/index.php?id=139">FLUKE 80РК-24</a> / 
			<a title="FLUKE 80РК-25 И 80РТ-25" href="/index.php?id=140">FLUKE 80РК-25 И 80РТ-25</a> / 
		</div>
	</li>
	<li>
		<a href="#"><img src="http://fluke-rf.ru/assets/images/noimage.jpg" alt="" class="product-photo" /></a>
		<div class="product-content">
			<h3>
				<a href="#">Термопары и аксессуары для измерения температуры</a>
			</h3>
			<a title="FLUKE 80РК-22" href="/index.php?id=138">FLUKE 80РК-22</a> / 
			<a title="FLUKE 80РК-24" href="/index.php?id=139">FLUKE 80РК-24</a> / 
			<a title="FLUKE 80РК-25 И 80РТ-25" href="/index.php?id=140">FLUKE 80РК-25 И 80РТ-25</a> / 
			<a title="FLUKE 80РК-26" href="/index.php?id=141">FLUKE 80РК-26</a> / 
			<a title="FLUKE 80RK-27" href="/index.php?id=142">FLUKE 80RK-27</a> / 
			<a title="FLUKE 80RK-1-1 AND 80RJ" href="/index.php?id=143">FLUKE 80RK-1-1 AND 80RJ</a> / 
			<a title="FLUKE 80РК-3А" href="/index.php?id=144">FLUKE 80РК-3А</a> / 
			<a title="FLUKE 80РК-8" href="/index.php?id=145">FLUKE 80РК-8</a> / 
			<a title="FLUKE 80РК-9 И 80PJ-9" href="/index.php?id=146">FLUKE 80РК-9 И 80PJ-9</a> / 

		</div>
	</li>
</ul>

Edited by IIAIIIA
  • Like 1
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