민서네집

float 에서 display: inline-block 의 용도 본문

WEB (HTML, CSS)

float 에서 display: inline-block 의 용도

브라이언7 2014. 9. 3. 13:48 



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet" type="text/css">
<title>TEST Page</title>
<style>
body {
	background-color: #63b439;
	font-family: 'Source Sans Pro', Verdana;
	font-weight: 600;
}

#left_div {
	float: left;
	min-width: 327px;
	height: 200px;
	background-color: #419217;
}

#right_div {
	background-color: #85d65b;
	display: block;
}

p.title {
	font-weight: bold;
	color: white;
	font-size: 40px;
	margin: 10px 0;
}
</style>
</head>
<body>
	<div style="min-width: 600px; width: 100%;">
		<div id="left_div">
			<p class="title">div id="left_div"</p>
			<p class="title">float: left</p>
		</div>
		<div id="right_div">
			<div style="display: inline-block; margin-top: 78px;">
				<div style="display: table-cell; height: 49px; vertical-align: middle; font-weight: bold; color: #3c7138; font-size: 30px;">div id="right_div"</div>
			</div>
			<hr style="height: 3px; border: none; background-color: white; margin: 0" />
			<p class="title">display: block</p>
			<p><span style="font-size: 20px">homepage</span><span style="font-family: 'Source Sans Pro'; font-weight: 400; font-size: 20px; margin-left: 10px;">bryan7.tistory.com</span></p>
		</div>
	</div>
</body>
</html>

여기서 homepage bryan7.tistory.com 문구를 오른쪽 단락으로 나란히 놓고 싶으면 어떻게 해야 될까?

그럴 때는 오른쪽 단락(<div id="right_div">)을 display: inline-block; 으로 만들어준다.



아래처럼 수정해 주면 된다.


width를 변경해 준 것은 아래 흰 선(hr)이 오른쪽 끝까지 가도록 하기 위해 right_div DIV의 너비를 100%에서 left_div DIV의 너비 만큼 뺀 값으로 설정해 준 것이다.


#right_div {

background-color: #85d65b;

width: calc( 100% - 327px );

display: inline-block;

}


저작자표시

'WEB (HTML, CSS)' 카테고리의 다른 글

favicon 만들어주는 사이트 - Favicon Generator  (0) 2014.09.05
웹리소스를 GZIP으로 압축 전송  (0) 2014.09.03
'Source Sans Pro' Font / 'Roboto' Font  (0) 2014.09.02
framer.js  (0) 2014.08.28
IE9, FireFox 브라우저에서 image의 onload 이벤트가 불리지 않음.  (0) 2014.08.08
공유하기 링크
'WEB (HTML, CSS)' Related Articles more
Comments