margin负值

如果父级的宽度变宽,仍然是自适应的。(可以改变.box的宽度试试,也可以加许多文字测试。)注意:不需要给右侧加任何宽度,因为margin-left把左侧的图像+边距都加到一起了呢,就能永远保持自适应了,修改图片什么的比较方便哦。

代码如下:

<style>
    *{ margin:0; padding:0;}
    li{ list-style: none;}
    .clearfix:after,.clearfix:before{
        content: '';
        display: table;
    }
    .clearfix:after{
        clear:both;
    }
    .clearfix{*zoom:1;}
    .box{
        width:452px;
        height:112px;
        border: 1px solid red;
        margin:40px auto;
    }
    .box h6{
        height: 20px;
        line-height: 20px;
        font-size:12px;
        margin-top: -10px;
        margin-left:10px;
        background: #fff;
        padding: 0 10px;
        float:left;
        margin-bottom: -10px;
    }
    .cont{
        padding: 16px 10px;
    }
     .img{
          float:left;
     }
    .img,.img img{
        width: 80px;
        height: 80px;
        border:1px solid #E5BFBF;
    }
    .text{
        margin-left:98px;
    }
</style>
</head>

<body>
    <div class="box">
         <h6>关于我们</h6>
         <div class="cont clearfix">
             <div class="img">
                 <img src="img/faye.jpg" alt="faye">
              </div>
             <div class="text">
                 <h3>Faye</h3>
                 <p>Faye0413</p>
                 <p class="txt">简介简介简介简介简介简介简介简介简介简介简介</p>
             </div>
         </div>
    </div>
</body>

当然,实现此效果也可以用定位,把“关于我们”用定位定过去也是极好的!

代码如下:

.box{
        width:452px;
        height:112px;
        border: 1px solid red;
        margin:40px auto;
       
position:relative;
    }
    .box h6{
        height: 20px;
        line-height: 20px;
        font-size:12px;
        background: #fff;
        padding: 0 10px;
       
position:absolute;
        left:10px;
        top:-10px;

    }(其他代码都一样)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值