Question

我有一个“包装”div，假设宽度为80％，在div周围，我想将宽度（例如一个形式）限制为300px。当控件设置为“填充”宽度时，控件与“包装器”div重叠。我显然觉得这很难看。我知道我可以将overflow属性设置为只添加滚动条，但我真正想做的是阻止“包装器”div缩小小于其内容。

Answer 1

在宽度80％

之后，给包装器一个最小宽度为300px

Answer 2

听起来您需要在包装容器上设置最小宽度。这是一个简单的例子：

HTML：

<div class="wrapper">
    <form>
        <input type="text">
        <input type="text">
            <button type="submit">Save</button>
    </form>
</div>

CSS：

.wrapper {
    width: 80%;
    min-width: 300px; /*This should be at least as wide as your form, wider if you need extra room */
    position: relative;
}

form {
    width: 300px;
}

input {
    width: 100%;
}

我已经设置了一个简单的jsfiddle来演示：http://jsfiddle.net/MhxVz/

如何在可变宽度div内部固定宽度div而不溢出？

2 个答案: