2013-09-30 2 views
0

div를 사용하는 간단한 프레임 워크

위에서 div를 사용하려고합니다. 각 사각형 (하나는 길고 오른쪽은 사각형)은 하나의 단위 여야합니다. 그것은 div 안에 div가되어야 하는가? (나는 분명히 이렇게 새로운 어떤 도움을 주셔서 감사합니다!). 프레임의 크기는 .. 나는 "프레임"당신의 컨테이너 div div에 확인하고 설정합니다

+0

문제가 해결 되었습니까? –

답변

0

<body> 
<div id="frame"> 
    <div id="div1"></div>   
    <div id="div2"></div> 
    <div id="div3"></div> 
    <div id="div4"></div> 
    <div id="divSettings"></div> 
</div> 
</body> 

(스타일 시트의 각 사업부의 제작 국경을) 고정하지만 신축성이 될해서는 안 모든 다른 DIV 플로트 사용의 :. 오른쪽 플로트 "왼쪽, BR 태그 및 widht = XX % 특성을

0
내가 %로 div의 내 div의, 폭을 사용 something like this을 만들 것

float:right 오른쪽

에 내부 된 div를 넣어
/* HTML */ 
<div id="frame"> 
    <div class='row'><div class='inner'></div></div> 
    <div class='row'><div class='inner'></div></div> 
    <div class='row'><div class='inner'></div></div> 
    <div class='row'><div class='inner'></div></div> 
    <div id="divSettings"></div> 
</div> 

/* CSS */ 
#frame { 
    width: 350px; 
    height: 460px; 
} 
.row { 
    height:100px; 
    width: 100%; 
} 
.inner { 
    float: right; 
    width: 33%; 
    height:100%; 
    border-left:1px solid black; 
} 
#divSettings { 
    height: 50px; 
    width:100%; 
} 
div:not(.inner) { 
    border: 1px solid black; 
} 

참고 : frame의 높이를 설정하는 경우, 추가 된 높이를 포함하는 것을 잊지 않는 내부 div의가 있다고 상단과 하단에있는 국경

0

Fiddle

<div class="left" style="float:left; width:70%"> 
    <div class="left1">left 1</div> 
    <div class="left1">left 2</div> 
    <div class="left1">left 3</div> 
</div> 

<div class="right" style="float:right; width:30%"> 
<div class="right1">right 1</div> 
    <div class="right1">right 2</div> 
    <div class="right1"> right3</div> 
</div> 
<div class="footer" style="clear:both;">footer 
</div> 
0

EXAMPLE

이 방법으로 행을 만들고 두 행을이 행에 넣습니다.

우리가 모든 div의이 div 용기 내부의 상대적 위치에있는 또 다른 방법도있다 :

EXAMPLE 2

지금은 당신에게 달려 당신이 사용하는 더 나은 무엇을 결정하는 것 ...

관련 문제