Верстка

serg_ss · August 17, 2010

Здравствуйте задался вот сверстать такую конструкцию:

расстояние промежуточное равно 2px высота фиксированная... Как такую конструкцию можно собрать из дивов?

Я пробовал так:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test</title>
	<style type="text/css">
		html, body {
			width:100%;
		}
		header {
			display: block;
			width: 95%;
			margin: 0 auto;
		}
		#head_left, #head_right {
			width: 50%;
			height: 105px;
			float: left;
		}
		#head_left_first {
			width: 100%;
			height: 21px;
			background-color: green;
		}
		#head_left_second {
			width: 100%;
			height: 84px;
			background-color: red;
		}
		#head_right_first {
			width: 40%;
			height: 105px;
			background-color: blue;
			float: left;
		}
		#head_right_second {
			width: 60%;
			height: 105px;
			background-color: black;
			float: left;
		}
		#head_bottom {
			width: 100%;
			height: 30px;
			float: left;
		}
		#head_bottom_first {
			width: 50%;
			height: 30px;
			background-color: gray;
			float: left;
		}
		#head_bottom_second {
			width: 50%;
			height: 30px;
			background-color: #ff9900;
			float: left;
		}
	</style>
</head>

<body>
	<header>
			<div id="head_left">
				<div id="head_left_first"></div>
				<div id="head_left_second"></div>
			</div>
			<div id="head_right">
				<div id="head_right_first"></div>
				<div id="head_right_second"></div>
			</div>
			<div id="head_bottom">
				<div id="head_bottom_first"></div>
				<div id="head_bottom_second"></div>			
			</div>
	</header>
</body>

</html>

Однако если я пробую сделать промежуток между дивами, по средствам border, margin, padding то все разъезжается(outline не подходит потому что не работает в ie 6-7)... Помогите правильно сверстать.

panig · August 17, 2010

для каждого блока сделать оберточный див которому указывать ширину в процентах, а самому блоку ширину не делать, а указать отступы margin.

кстати, тут же три разных блока, необязательно делать как три строки.

shvv · August 17, 2010

В случае head_left_first и second можно использовать маржин, если убрать ширину 100%.

А для остальных, или задавать отступы в процентах, и на это расстояние уменьшить ширину, или использовать свойство border-box, которое не везде работает, или засовывать в каждый див еще по одному и уже внутреннему блоку задавать отступы.

Sign In

Верстка

Question

serg_ss

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

panig

Link to comment

Share on other sites

shvv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information