Question

鉴于此HTML：

<div id="div1">
    <div id="div1a"></div>
    <div id="div1b"></div>
    <div id="div1c"></div>
    <div id="div1d"></div>
</div>
<div id="div2a"></div>

我可以使用CSS显示属性获取此结构吗？

Answer 1

当然，可以使用以下CSS完成：

/* Height of the top box.  Change as needed to suit your layout */
#div1a {
  height: 50px;  
}

/* 3 left side boxes.  Again, alter the height/width as needed.  If you change
   the width, you'll need to update the margin-left on #div2a as well. */
#div1b, #div1c, #div1d {
  width: 100px;
  height: 60px;  

  /* This bit causes them to float to the left in a vertical row of boxes */
  float: left;
  clear: both;   
}

/* Increased height of the last box on the left */
#div1d {
  height: 200px;   
}

/* Main content box on the right.  min-height can be changed as needed. 
   The margin makes room for the 3 boxes floating down the left side. 
   You read its properties as margin: top right bottom left; */
#div2a {  
  min-height: 365px;  
  margin: 0 20px 0 140px;   
}

/* Generic margin/padding for all <div>'s */
div {
  margin: 5px;
  padding: 5px;
}

/* Remove the generic margin for #div1 */
#div1 { 
  margin: 0;
}

Demo of it正在行动中。

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
.mask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   background-color: #f4f4f4
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.colleft{
   position: relative;
   width: 100%;
   right: 84%;
   background-color: #f4f4f4
}
.col1{
   position: relative;
   overflow: hidden;
   float: left;
   width: 82%;
   left: 101%;
   background-color: #e6e6e6
}
.col2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 14%;
   left: 3%;
   background-color: #e6e6e6
}
.footer{
   float: left;
   width: 100%;
   background-color: #b4caf7
}
body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
    <div class="header">
        DIV1A
    </div>
    <div class="colleft">
        <div class="col1">
            DIV2A
        </div>
        <div class="col2">
            <div id="div1b">DIV1B</div>
            <div id="div1c">DIV1C</div>
            <div id="div1d">DIV1D</div>
        </div> 
    </div> 
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

使用display或float进行css定位，可以使用display属性获取此结构

2 个答案: