如何改进下列代码?

x_hola
  • 666

我想做成这个效果。
图片描述
代码如下:

<!DOCTYPE html>
<html lang="en">
<style>
.level1{width:200px;height:50px;background:red ;float:left}
.level2{width:200px;height:50px;background:yellow ;float:left;}
.level3{width:200px;height:50px;background:green ;float:left;}
.level4{width:200px;height:50px;background:blue ;float:left;}
</style>

<body>
    <div>
         <div class='level1'></div>
         <div class='level2'></div>
    </div>
    <div class='level3'></div>
    <div class='level4'></div>
</body>
</html>

上述代码多了一组<div></div>,
有什么办法在让这个代码更简单一些,去掉level1、level2外围的地址?
(不使用绝对定位)

P.S
上述代码出错了,效果依然是一横列
父元素高度没了。。

回复
阅读 2.7k
9 个回答
gu_castle
  • 163

我觉得不但不应该去掉,而且应该在 level3、level4 外围也套上一层 div。

我不觉得代码少就是简单,多套上一层反而会整洁干净一点。

所以我大概会这样写吧 0_0

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#l1 { width: 400px; }
#l2 { width: 400px; }

#l1 #r1 { width: 200px; height: 50px; float: left; background-color: red; }
#l1 #r2 { width: 200px; height: 50px; float: left; background-color: yellow; }
#l2 #r1 { width: 200px; height: 50px; float: left; background-color: green; }
#l2 #r2 { width: 200px; height: 50px; float: left; background-color: blue; }

</style>
</head>

<body>
<div id="l1">
  <div id="r1"></div>
  <div id="r2"></div>
</div>
<div id="l2">
  <div id="r1"></div>
  <div id="r2"></div>
</div>
</body>
</html>
guangpunba
  • 5.4k
.box{width:500px; }
.box div{
    float: left;
    width:50%;
 
    list-style: none;
    height: 50px;
}
.box div:nth-child(1){background: #333;}
.box div:nth-child(2){background: #ddd;}
.box div:nth-child(3){background: #f00;}
.box div:nth-child(4){background: #f90;}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  


<div class="box clearfix">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

清除浮动

这样呢

<!DOCTYPE html>
<html lang="en">
<style>
.level{width:200px; height:50px; float:left}
.level1{background:red;}
.level2{background:yellow;}
.level3{background:green;}
.level4{background:blue;}
.clear{float:clear}
</style>

<body>
    <div class='level level1'></div>
    <div class='level level2'></div>
    <div class="clear"></div>
    <div class='level level3'></div>
    <div class='level level4'></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
    .level1{width:200px;height:50px;background:red ;float:left}
    .level2{width:200px;height:50px;background:yellow ;float:left;}
    .level3{width:200px;height:50px;background:green ;float:left;}
    .level4{width:200px;height:50px;background:blue ;float:left;}
    .outer{
        width:400px;
        height:100px;
    }
    .inner{
        width:200px;
        height:50px;
        float:left;
    }
    .first{
        background:red ;
    }
    .second{
        background:yellow ;
    }
    .third{
        background:green ;
    }
    .fourth{
        background:blue ;
    }
</style>
</head>
<body>
<div class="outer">
    <div class='inner first' ></div>
    <div class='inner second' ></div>
    <div class='inner third' ></div>
    <div class='inner fourth'></div>
</div>

</body>
</html>

首先你的不对,屏幕宽是是在一行的图片描述

可以用table,把边框还有默认的样式都去掉

1.用画图,画一个正方形,然后分别设置四个象限的颜色、
2.在html中建立一个div,宽度高度自适应,背景制定成这个图片!

完毕!

好处是,你在什么分辨率的设备上看,效果都是一样的!

a : block
with
div

火跃工作室
  • 62
<style type="text/css">
    .level{width:500px;}
    .level li{
        float: left;
        width:50%;
        height: 50px;
        list-style: none;
    }
    .level1{background: red;}
    .level2{background: yellow;}
    .level3{background: green;}
    .level4{background: blue;}
</style>
<ul class='level'>
    <li class='level1'></li>
    <li class='level2'></li>
    <li class='level3'></li>
    <li class='level4'></li>
</ul>

不用nth-child是因为有些早期浏览器不支持!

可不可以这样:

<!DOCTYPE html>
<html lang="en">
<style>
*{
  border:0px;margin:0px;padding:0px;
}
dl{
  width:400px;
}
dl dd{
  width:50%;
  height:50px;
  float:left;
}
dl.row1 dd:nth-child(1){
  background:red;
}
dl.row1 dd:nth-child(2){
  background:blue;
}
dl.row2 dd:nth-child(1){
  background:black;
}
dl.row2 dd:nth-child(2){
  background:yellow;
}
</style>

<body>
<dl class="row1"><dd></dd><dd></dd></dl>
<dl class="row2"><dd></dd><dd></dd></dl>
</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏