Распределение блоков по ширене - HTML и CSS

povelitel · 15.10.2012, 00:31

Всем привет помогите решить проблему с блоками, их нужно равномерно распределить в главном блоке wrapper у которого фиксирована ширина.

Вот картинка

А нужно сделать так

css

Цитата:

#content{
float:left;
width:600px;
height:1000px;
border: 1px solid #000;
margin: 31px 0 0 20px;
}

.conBox{
width:180px;
height:250px;
background:url(../image/conBg.png) repeat-x 200px;
border: 1px solid #fff;
float:left;
margin: 0 0 0 10px;
}

.conBox img{
margin: 42px 0 0 15px;
border: 5px solid #fff;
}

Код HTML:

     <div id="content">
     
         <div class="conBox">
          <a href="#"><img src="image/image1.jpg" alt="rog" title="rog"/></a>
         </div>
         
         <div class="conBox">
          <a href="#"><img src="image/image1.jpg" alt="rog" title="rog"/></a>
         </div>
         
         <div class="conBox">
          <a href="#"><img src="image/image1.jpg" alt="rog" title="rog"/></a>
         </div>
         
         <div class="conBox">
          <a href="#"><img src="image/image1.jpg" alt="rog" title="rog"/></a>
         </div>
         
         <div class="conBox">
          <a href="#"><img src="image/image1.jpg" alt="rog" title="rog"/></a>
         </div>
         
         <div class="conBox">
          <a href="#"><img src="image/image1.jpg" alt="rog" title="rog"/></a>
         </div>
         
     </div>

Cone · 15.10.2012, 17:00

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>

<style>

* {
	
	margin:0;
	pdding:0;
	}
	
.wrapper {
	display:table;
	position:relative;
	width:600px;
	background:silver;
	}
	
	
.wrapper div {
float:left;
background:red;	
width:135px;
height:200px;
position:relative;
display:table;
text-align:center;
margin:0 20px 10px 0;	
	}
	
.wrapper div.last {
margin-right:0;	
	
	}	


</style>

<body>

<div class="wrapper">


<div>23</div>
<div>23</div>
<div>23</div>
<div class="last">23</div>

<div>23</div>
<div>23</div>
<div>23</div>
<div class="last">23</div>


<div>23</div>
<div>23</div>
<div>23</div>
<div class="last">23</div>


</div>


</body>
</html>

povelitel · 15.10.2012, 20:17

Цитата:

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

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
</head>

<style>

* {
	
	margin:0;
	pdding:0;
	}
	
.wrapper {
	display:table;
	position:relative;
	width:600px;
	background:silver;
	}
	
	
.wrapper div {
float:left;
background:red;	
width:135px;
height:200px;
position:relative;
display:table;
text-align:center;
margin:0 20px 10px 0;	
	}
	
.wrapper div.last {
margin-right:0;	
	
	}	


</style>

<body>

<div class="wrapper">


<div>23</div>
<div>23</div>
<div>23</div>
<div class="last">23</div>

<div>23</div>
<div>23</div>
<div>23</div>
<div class="last">23</div>


<div>23</div>
<div>23</div>
<div>23</div>
<div class="last">23</div>


</div>


</body>
</html>

В IE не работает display:table;

Cone · 15.10.2012, 21:17

Цитата:

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

В IE не работает display:table;

IE 6-9 все работает

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Позиционирование блоков	impulsgraw	HTML и CSS	1	17.03.2012 13:31
Позиционирование блоков	KorPaEv	HTML и CSS	5	11.08.2011 21:49
Высота блоков	Baaandit	HTML и CSS	2	28.04.2010 09:52
наложение блоков	vedro-compota	HTML и CSS	5	25.04.2010 17:26
Высота блоков.	Grind	HTML и CSS	1	23.10.2008 21:37