CSS常见布局

2018-10-08  本文已影响0人  郑宋君

双列布局:一列固定宽度,另外一列自适应宽度
实现思路:浮动元素 + 普通元素margin(右边时自适应同理)

  <style>
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;
    }
    .main{
      margin-left: 210px;
      height: 400px;
      background: red;
    }
  </style>
    <div class="aside">aside</div>
    <div class="main">content</div>

三列布局:两侧两列固定宽度,中间列自适应宽度
实现原理:浮动元素 + 普通元素margin(同样记住渲染顺序,自适应放最后,浮动元素放前两位)

<style>
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 110px; /*为什么要加margin-left*/
      margin-right: 210px;
      height: 400px;
      background: red;
    }

</style>

    <div class="menu">menu</div>
    <div class="aside">aside</div>
    <div class="main">content</div>

水平等距排列

<style>
*{
  padding:0px;
  margin:0px;
}

.ct{
    width:640px;
  background:red;
  overflow:hidden
}


li{
  width:200px;
  height:200px;
  background:yellow;
  float:left;
  margin-left:20px;
  border:none;
}

ul{
  list-style:none;
  margin-left:-20px;
}
</style>
<div class="ct">
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
</div>

PS:外部必须还有一个父级容器包裹,给予宽度属性,此外层使用margin负值调整状态

上一篇 下一篇

猜你喜欢

热点阅读