div 화면 분할
글쓴이: ant01 / 작성시간: 수, 2013/01/09 - 7:11오전
화면의 좌우 20%씩을 남기고 중앙에 모이게 하고 싶은데 아래와 같이하니 가운데가 비고 좌우로 쏠립니다.
당연한 결과지만 여기서 좌우로 흩어진 놈들을 중앙으로 모으는 방법을 모르겠습니다.
어떻게 하면 중앙에 모일까요?
<head>
<style type="text/css">
#yellow {background-color:yellow; float:left; width:30%; height:50%;}
#pink {background-color:pink; left:clear; float:right; width:30%; height:50%;}
#B {background-color:green; float:left; width:50%; height:50%;}
#C {background-color:blue; float:right; width:50%; height:50%;}
</style>
</head>
<body>
<center>
<div id="yellow">A의 영역</div>
<div id="pink">pink</div>
<div id="B">B의 영역</div>
<div id="C">C의 영역</div>
</body>
</html>Forums:
이걸 원하시는 건지는
이걸 원하시는 건지는 모르겠습니다만..
#yellow에 margin-left: 20%; 를 주고
#pink에 margin-right: 20%;를 주면 되지요.
이렇게 해결했습니다.
아래와 같은 구조로 코딩했습니다.
알고보니 간단하군요..
<center> <div> <div> </div> <div> </div> </div>위의 2개를 inline-block으로 띄우고 마진을
위의 2개를 inline-block으로 띄우고 마진을 auto로 주시면 됩니다.
#yellow { background-color:yellow; width:30%; height:50%; margin:auto; display:inline-block; }
#pink { background-color:pink; width:30%; height:50%; margin:auto; display:inline-block; }
댓글 달기