CSS 和 HTML 拆分容器

Question

我正在尝试将我的容器拆分为多个不同尺寸的方框。我用 jsfiddle 向您展示了我的项目：

@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 页面：

<!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://thumbs.dreamstime.com/z/cool-new-web-template-large-icons-28075027.jpg

我想在容器内部创建一个比其他容器大得多的圆角方框。在这个大方块的右边和底部我会放一些小方块。

我尝试了 table 和 table-具有显示属性的单元格，但我的结果不被接受table。我必须只使用 css 和 html.

谢谢。

Answer 1

使用定位。我刚刚在下面向您展示了如何完成此操作的快速演示：

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>

CSS 和 HTML 拆分容器

CSS and HTML to split a container

html

css

containers