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>
  • 相关阅读:
    771. Jewels and Stones
    706. Design HashMap
    811. Subdomain Visit Count
    733. Flood Fill
    117. Populating Next Right Pointers in Each Node II
    250. Count Univalue Subtrees
    94. Binary Tree Inorder Traversal
    116. Populating Next Right Pointers in Each Node
    285. Inorder Successor in BST
    292. Nim Game Java Solutin
  • 原文地址:https://www.cnblogs.com/it563/p/628706.html
Copyright © 2011-2022 走看看