限制div的最小宽度

Question

我有一个带有ff css属性的div：

.header {

width: 100%;

background-color: #1cb14d;

position: fixed;
top: 0;
left:0;
border-bottom: none;
z-index: 999;

font-family:'Segoe UI Light';
color: #ffffff;
}

HTML：

<div class="header">

        <div class="section_container">
            <div class="col span_1_of_12">
                //something here
            </div>
            <div class="col span_1_of_12">
                //something here
            </div>
            <div class="col span_7_of_12">
                //something here
            </div>
            <div class="col span_3_of_12">
                //something here
            </div>
        </div>

    </div>

我想限制它的最小宽度，但它似乎不起作用。我需要设置最小宽度以防止div在调整浏览器大小时覆盖其他内容。有办法吗？感谢

Answer 1

如果.header需要最小宽度，你可以添加它：

.header { width: 100%; min-width: 200px; }

否则，如果您希望section_container具有最小宽度：

.section_container { min-width: 200px; }

这将覆盖/添加框架默认的最小宽度（如果存在）

Answer 2

目前，您已使用这些指令将元素锚定到视口的左右边界，该指令取代min-width和min-height：

left: 0;
right: 0;

删除它们，然后添加min-width或max-width指令，具体取决于您要查找的效果。