컨테이너를 분할하는 CSS와 HTML

크기가 다른 여러 사각형 상자에서 컨테이너를 분할하려고합니다.컨테이너를 분할하는 CSS와 HTML

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    @import url(main.css); 
</style> 
</head> 
<body> 
    <div id="menu"> 
     <ul> 
      <li><a href="pc.html">Il mio PC</a></li> 
      <li><a href="prova.html">prova</a></li> 
     </ul> 
    </div> 
    <div id="container"> 
     ciao 
    </div> 
    <div id="footer"> 
     prova 
    </div> 
</body>

지금 나는이 이미지처럼 컨테이너를 분할하고 싶습니다 :

http://jsfiddle.net/y0j55ooL/

@import url(http://fonts.googleapis.com/css?family=Roboto); 

#menu { 
    text-align:center; 
} 
#menu li { 
    display: inline; 
} 
#menu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 
#menu a{ 
padding:0 30px; 
color: #C0C0C0; 
font-family: 'Roboto', sans-serif; 
} 
body { 
    background-color: #454343; 
    text-align: center; 
} 
#container { 
    margin:1% auto; 
    border: 0.1em solid; 
} 

#footer{ 
position: absolute; 
bottom: 0; 
left: 0; 
width:100%; 
background-color:#333; 
height:3em; 
line-height:3em; 
text-align:left; 
}

이는 index.html 페이지입니다 : 나는 당신에게 내 프로젝트를 보여 jsfiddle 사용

http://thumbs.dreamstime.com/z/cool-new-web-template-large-icons-28075027.jpg

다른 사람들보다 훨씬 큰 둥근 사각형 상자. 이 큰 광장의 오른쪽과 아래쪽에 작은 정사각형 상자가 있습니다.

표시 속성을 사용하여 표 및 표 셀을 시도했지만 결과가 허용되지 않았습니다. 나는 css와 html만을 사용해야 만한다.

감사합니다.

출처

2015-02-03 Mito

당신이 그것을 부트 스트랩/purecss이/..., 어쩌면 대신 자기의 쉬울 수 사용하여 시도해야 컨테이너 격자 로직 –

을 작성하거나 그리드를 원한다면 방대한 라이브러리를 가져 오지 않으려면 RGS => http://www.responsivegridsystem.com/을 사용하십시오 (그리드가 사용하는 그리드에 대해서만 부트 스트랩을 사용합니다). 종이를 들어 올리는 크레인) – PlantTheIdea

@PlantTheIdea 그래서 내가 purecss를 언급했는데, 부트 스트랩보다 가볍습니다. 당신의 링크를 살펴 보겠습니다. 좋은 것 같습니다. –

위치 지정을 사용하십시오. 난 그냥이 수행하는 방법은 아래에 당신에게 빠른 데모를 보여 주었다 :

html,body{margin:0;padding:0;} 
 
.wrapper{ 
 
    width:100%; 
 
    height:600px; 
 
    background:gray; 
 
    position:relative; 
 
    } 
 
.bigImg{ 
 
    height:45%; 
 
    width:55%; 
 
    background:url(http://placekitten.com/g/300/300); 
 
    position:absolute; 
 
    top:10%; 
 
    left:15%; 
 
    } 
 
div{ 
 
    display:inline-block; 
 
    height:20%; 
 
    width:25%; 
 
    position:absolute; 
 
    } 
 

 
.one{ 
 
    background:red; 
 
    left:75%; 
 
    top:10%; 
 
    } 
 
.two{ 
 
    background:blue; 
 
    left:75%; 
 
    top:35%; 
 
    } 
 
.three{ 
 
    background:green; 
 
    left:15%; 
 
    top:60%; 
 
    } 
 
.four{ 
 
    background:orange; 
 
    left:45%; 
 
    top:60%; 
 
    } 
 
.five{ 
 
    background:yellow; 
 
    left:75%; 
 
    top:60%; 
 
    }

<div class="wrapper"> 
 
    <div class="bigImg"></div> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="three"></div> 
 
    <div class="four"></div> 
 
    <div class="five"></div> 
 
</div>

출처

2015-02-03 15:29:20 jbutler483

고마워요,이 솔루션은 제 사용하기에 완벽합니다.) – Mito

@ 미토 : 최선의 방법은 포지셔닝에 대해 배우는 것입니다. 그것은 생산 가치있는 코드에서 사용됩니다. – jbutler483

컨테이너를 분할하는 CSS와 HTML

답변

관련 문제