zoukankan      html  css  js  c++  java
  • 在IE中使用最小宽度minwidth(CSS版)

    在IE中使用最小宽度min-width(CSS版)

    min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得,所以如果你用IE将博客园的窗口宽度缩到足够小,所有的字都变在一列中。

    常见的解决方法就是用javascript或IE的expressions。

    在这里我来尝试用css来解决这个问题

    假设我们需要一个min-width为300px的div

    第一步

    <div style="border-left: 300px solid #fff;height:1px"></div>

    将左边框设为300px,并且边框的颜色和页面的背景色一样,高度设为1,否则这个div就看不见了

    第二步
    在上面的div中,加入下面的代码

    <div style="margin-left: -300px;position: relative; height:1px;"></div>

    定位方式设为 relative(对象不可层叠),并把对象margin-left(左边的外补丁)设为-300px。
    这样这个div就会回到原点,而不是从300px开始,

    分析

    因为border-left为300px,所以div最小也得有300px,间接实现了min-width的功能。
    而由于margin-left为-300px且position:为relative,所以里面的文字不受border-left的影响

    完整的代码如下

    <div style="border: 1px solid red;  90%;">
     
    <div style="border-left: 300px solid #fff;height:1px;">
      
    <div style="margin-left: -300px;position: relative; height:1px;">
      宽度 90%, 最小宽度 300px;
      最小高度 300%
      
    </div>
     
    </div>
    </div>
  • 相关阅读:
    BIEE建模参考规范
    informatica 学习日记整理
    Web Service 的工作原理
    Oracle 时间差计算
    oracle基础知识
    Oracle 外连接和 (+)号的用法
    根据appId匹配项目名称
    vue技术分享-你可能不知道的7个秘密
    echarts3 迁徙图 迁入迁出
    ES6学习笔记
  • 原文地址:https://www.cnblogs.com/it563/p/628706.html
Copyright © 2011-2022 走看看