phpstudy集成环境

 首页 > 关于一个CSS布局该怎么写的问题

关于一个CSS布局该怎么写的问题

今天写了一个简单的布局，然而写完之后觉得CSS文件真心丑哭我，写的太烂了，先说说效果页面：……算了，直接上图吧。

呐，就是这样子啦。
再看看代码：


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#box{
  width:900px;
  height:800px;
  margin:auto;
  background-color:#ccc;
}
#left{
  width:450px;
  height:800px;
  margin:0px;
  background-color:red;
}
#right{
  width:450px;
  height:800px;
  margin-left:450px;
  margin-top:-800px;
  background-color:blue;
}
#middle{
  margin:-625px auto auto auto;
  width:450px;
  height:450px;
  background-color:#ccc;
}
</style>
</head>

<body>
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
 <div id="middle"></div>
</body>
</html>

表示自己感觉这CSS写的很不好，虽然效果是实现了。各位大神，如果是你们写这个，会是什么样子的？或者你们觉得这个有哪里是需要改的（好啦好啦，写的跟翔一样是吧，我知道啦(￢_￢)）。自己感觉选择器right里的CSS写的很没水准。还有middle里面的margin也不是很好（都不知道为什么是-800px，我只是一点点看着界面改出来的）……求大师指点啊

传统写法 ：

    <!DOCTYPE HTML>
    <html>
    
    <head>
        <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        .container{
          font-size:0;
          height:500px;
          width:500px;
          margin:0 auto;
          position: relative;
        }
        .middle{
          position: absolute;
          top:50%;
          left:50%;
          margin-top:-25%;
          margin-left:-25%;
          width:50%;
          height:50%;
          background-color: black;
        }
        .left{
          display: inline-block;
          width:50%;
          height:100%;
          background-color: red;
        }
        .right{
          display: inline-block;
          width:50%;
          height:100%;
          background-color: blue;
        }
        
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="middle"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
    
    </html>

你需要定位。。。

两列等宽布局最优的方案应该是flexbox，简单明了的核心代码如下：

#box{
  display: flex;
}
#left{
  flex: 1;
}
#right{
  flex: 1;
}

https://jsfiddle.net/Alsiso/ru0q2bjx/

但是flexbox的对浏览器支持有限，仅支持11.0+，还要使用前缀加属性值来得到最好的兼容

html:

<div id="box">
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle"></div>
</div>

css:

*{padding: 0;margin: 0;}
#box{
    width: 400px;
    height: 300px;
    position: relative;
}
#left{
    width: 50%;
    height: 100%;
    float: left;
    background: red;
}
#right{
    width: 50%;
    height: 100%;
    float: right;
    background: blue;
}
#middle{
    background: grey;
    width: 200px;
    height: 200px;
    position: absolute;
    top:16%;
    left:25%
}

你怎么用margin定位，我这个居中是有点问题的额，直接数值居中，有兴趣可以研究下居中的问题

一楼的居中很nice，随手写个demo http://jsfiddle.net/c3dgsrbr/

css

*{
  margin:0px;
  padding:0px;
}
#box{
  width:900px;
  height:800px;
  margin:auto;
  background-color:#ccc;
  position:relative;
}
#left{
  width:450px;
  height:800px;
  display: inline-block;
  background-color:red;
}
#right{
  width:450px;
  height:800px;
  display: inline-block;
  background-color:blue;
}
#middle{
  position:absolute;
  top:0;          
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:450px;
  height:450px;
  background-color:#ccc;

}

html

<div id="box">
  <div id="left">
    
  </div><div id="right">
    
  </div>
  <div id="middle"></div>
</div>

</div><div id="right">这俩必须连着，否则inline-block会有间隙

看我刚写的这个例子，应该能给你很多启发：

http://codepen.io/anon/pen/qdGoyY

<!DOCTYPE html>
<head>
    <style type="text/css">
        #box {
            position:relative;
            width:900px;
              height:800px;
              margin: auto;
        }
        #left {
            width:450px;
              height:800px;
              float: left;
              background-color:red;
        }
        #right {
            width:450px;
              height:800px;
              float:right;
              background-color:blue;
        }
        #middle {
            position: absolute;
            top:50%;
            left:50%;
              margin-top: -225px;
              margin-left: -225px;
            width:450px;
              height:450px;
              background-color:#ccc;
        }
    </style>
<head>
<body>
    <div id="box">
        <div id="left"></div>
        <div id="right"></div>
        <div id="middle"></div>
    </div>
</body
<html>

用定位的话，我大概会这么写

middle元素垂直居中水平居中的方法我采用的是，先绝对定位到50%，然后再margin过去它宽高的负一半。

<style>
    .warp-box{
      width:900px;
      height:500px;
      background:#000;
      position:relative;
    }
    .half-box{
      width:50%;
      height:inherit;
      background:#f0f;
      float:left
    }
    .blue{
      background:blue
    }
    .float-box{
      width:200px;
      height:200px;
      background:#f5f5f5;
      position:absolute;
      left:50%;
      top:50%;
      margin-top:-100px;
      margin-left: -100px;
    }
  </style>
  <div class="warp-box">
    <div class="half-box"></div>
    <div class="half-box blue"></div>
    <div class="float-box"></div>
  </div>

绝对居中，这个在容器不知道宽高的时候 - -

position:absolute; 
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>剧中测试</title>
    <style>
        body {background-color: #f1f1f1;}
        .outer {
            width: 400px;
            height: 400px;
            line-height: 400px;
            position: relative;
            background-color: #f0ffff;
            text-align: center;
        }
        .outer:before {
            position: absolute;
            height: 100%;
            width: 50%;
            left: 0;
            background-color: #fffff0;
            content: "";
        }
        .inner {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            width: 200px;
            height: 200px;
            background-color: #fff0ff;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

如果你的红蓝两块区域不需要填内容，你可以试试下面的方法

HTML:

<div class='centered-block'>
    <div>这里是中间的灰色区域</div>
</div>

Style:

.centered-block {
    width: 800px; //不是必须的
    height: 600px; //不是必须的
    font-size: 0; //必须的，用来解决换行引起的间隔问题
    text-align: center; //必须的，用来水平居中
    background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
    //注意下我没有写浏览器的兼容写法
}

.centered-block::before {
    content: ''; //必须的
    display: inline-block; //必须的
    vertical-align: middle; //必须的，用来垂直居中的
    height: 100%; //必须的
    width: 0; //必须的
}

.centered-block>* {
    display: inline-block; //必须的
    vertical-align: middle; //必须的
    font-size: 1rem; //必须的，用来重置回字体，这里不能使用相对父节点的单位，比如em，％
    margin: 0 auto; // 非必须，水平居中的辅助写法
    //以下均为非必须
    background: gray;
    color: white;
    width: 300px;
    height: 200px;
}

注:

  1. 以上注释是按js注释来的，看的时候不必在意

  2. 样式是响应式的，写法对less，sass此类预编译语言友好

  3. 人非圣贤，孰能无错，权当借鉴

float+absolute

html:

 <div class="outer">
        <div class="left_half"></div>
        <div class="right_half"></div>
        <div class="middle"></div>
    </div>

css

.outer{
            width: 700px;
            height: 500px;
            margin: 0 auto;
            position: relative;
        }
        .left_half{
            width: 50%;
            height: 100%;
            background: red;
            float: left;
        }
        .right_half{
            width: 50%;
            height: 100%;
            background: yellow;
            float: left;
        }
        .middle{
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }

自己回答。今天突然有了个灵感，想到了一种倍感奇葩的写法……

<!DOCTYPE HTML>
<html>
<head>
<title>尝试布局</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
  background-color:#333;
}
#box{
  width:200px;
  height:400px;
  background-color:blue;
  border-color:red;
  border-style:solid;
  border-width:0 200px 0 0;
  position:relative;
}
#box:before{
  width:200px;
  height:200px;
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  background-color:green;
  
}
</style>
</head>
<body>
<div id="box"></div>
</body>

</html>
【热门文章】
【热门文章】