问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何改进下列代码？

头像
x_hola
    66617121145

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

    <!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
    上述代码出错了，效果依然是一横列
    父元素高度没了。。

    csshtml
    阅读 4k
    9 个回答
    得票最新
    头像
    gu_castle
      163611

      我觉得不但不应该去掉，而且应该在 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.4k42754
        .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>

        清除浮动

        头像
        coachmans
          4.6k21328

          这样呢

          <!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>
          头像
          kikong
            19.1k31320
            <!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>
            头像
            shirley
              81874769

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

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

              头像
              已注销
                433617

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

                完毕！

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

                头像
                多厘
                  8622725

                  a : block
                  with
                  div

                  头像
                  火跃工作室
                    631
                    <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是因为有些早期浏览器不支持！

                    头像
                    PDD
                      2643815

                      可不可以这样：

                      <!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>
                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题