zoukankan      html  css  js  c++  java
  • 三列自动布局

             很多时候我们都需要做一个带有圆角的图,这时会布局为左(圆角)中(平铺)右(圆角),而且中间是要根据内容自动撑开的(布局如下所示)

    <div class="contain">

    <div class="circleFrame">
          <div class="circleLeft">
           </div>
           <div class="circleRight">
            </div>
            <div class="circleMid">
            </div>
      </div>

    <div>

    注意:这里的左边和右边是放在一起的,而最外层的div是控制宽度,下面是css样式:

    .contain{

    300px;//这里设置了多少,内容就撑多少

    }

    .circleFrame{ 100%;}
    .circleLeft

    {   5px;
        height: 36px;
        float: left;
        _margin-right:-5px;//这个是解决IE6下边距的bug
        background: url(../images/topLeft.gif) no-repeat;}


    .circleRight

       5px;
        height: 36px;
        float: right;
        _margin-left:-5px;//这个是解决IE6下边距的bug
        background: url(../images/topRight.gif) no-repeat;}


    .circleMid
    {    height: 36px;
          margin:0 5px 0 5px;//这里的margin左右的像素是根据左、右的宽度来定的
        background: url(../images/topMid.gif) repeat-x; }

          一开始做的时候是把中间那块设为:width:auto,但是这样的在圆角外面会有多出来的一些瑕疵,因此要设为:margin:0 5px 0 5px;中间那块只占它原来的位置,而不多站了左右圆角的位置

          虽然在IE7/8/ff下能正常,但是在IE6下会有3px的bug出现,解决此bug,需要在左圆角那里设置_margin-right:-5px;在右圆角那里设置_margin-left:-5px;注意,方向是相反的。

  • 相关阅读:
    基于ffmpeg 直播推流和播放rtmp (IOS源码)
    Hadoop 安装指南
    机器学习算法( 七、AdaBoost元算法)
    机器学习算法( 五、Logistic回归算法)
    机器学习算法( 四、朴素贝叶斯算法)
    机器学习算法( 三、决策树)
    机器学习算法( 二、K
    Solr 多字段、打分规则、权重和实时索引同步
    Android Activity生命周期
    .net , java webSocket 连接 Socket.io (1.4.4版本) 问题
  • 原文地址:https://www.cnblogs.com/dreamhouse/p/2921053.html
Copyright © 2011-2022 走看看