Question

我有一个包含标题，内容和页脚元素的页面。这些元素的包装物占窗口宽度的70％。我正在寻找的是一种为这个包装器设置最小宽度的方法。在我的第一个小提琴中，它显示了现在的情况：http://jsfiddle.net/fwqZX/

HTML：

<div class=outerWrapper>
    <nav>
    <ul>
        <li class='active' id=tab1>Test1</li>
        <li id=tab2>Test2</li>
        <li id=tab3>Test3</li>
    </ul>
    </nav>
    <section class=content id=content>
    <div>
         sdflnsdfskdjfisahdfosad
    </div>
    </section>
    <footer>Footer</footer>
</div>

CSS：

html {
    overflow-y: scroll;
    font-family: Trebuchet MS;
    color: rgba(57,58,54, 0.8);
    text-shadow: 1px 4px 6px #fff, 0 0 0 #000, 1px 4px 6px #fff;
    font-size: 150%;
}

header, nav, footer{
    -webkit-user-select: none;       
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    white-space: nowrap;
    cursor: default;
}

body {
    margin: 0;
    text-align: center;
    background: url('dark_wall.png'), #393A36;
}

.content, footer, nav li {
    background-color: #fff;
    box-shadow: 0 0 10px -1px #000;
}

.outerWrapper {
    width: 70%;
    display: inline-block;
    min-width: 500px;
}

nav ul {
    margin: 0;
    padding: 0;
    text-align: left;
}

nav li {
    transition: all 0.2s linear;
    padding: 0.8em 0.5em;
    display: inline-block;
    min-width: 120px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    margin-right:10px;
}

nav li:not(.active) {
    box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000, inset 1px -10px 10px -11px #444;
    background-color:#eee;
    cursor: pointer;
}

nav .active {
    box-shadow: 0 -6px 10px -7px #000, 10px 0 10px -11px #000, -10px 0 10px -11px #000;
}

.content {
    padding: 1em;
    text-align:left;
    overflow: hidden;
    /*transition: height 0.2s ease-in-out;*/
}

.content div {
    transition: all 0.2s ease-in-out;
}

.content .hidden {
    opacity: 0;
}

footer {
    font-size: 0.8em;
    padding: 0.8em;
    text-align: left;
    margin: 20px 0;
}

在这个小提琴中，它显示了我希望它如何：http://jsfiddle.net/gkZL4/ 它之间的差异只是.outerWrapper类的最小宽度值。

第二小提琴的问题在于我有一个硬编码的最小宽度值。我希望.outwrapper的最小宽度能够适应导航的宽度（标签）。

我想阻止使用javascript。如果没有，我将使用硬编码的最小宽度值。

对此的任何帮助将不胜感激。

Answer 1

您需要给出最小宽度而不是正常宽度。

像这样：

.outerWrapper {
    min-width: 70%;
    display: inline-block;
}

Answer 2

否则，如果仍然希望它为width:70%;或任何尺寸符合内容（width:auto;/* wich is equal to not give width at all */）+ margin:auto;的话请改用display：table。

使用display：table可以让你不用多少标签或多少内容。然后，CSS可以在任何类似的结构和类名中重用。演示（没有宽度/宽度或最小宽度和3/4标签内容更宽/更小） http://jsfiddle.net/gkZL4/2/

.outerWrapper, .nowidth {
    display: table;/*or inline-block*/
    margin:auto;/* inefficient if inline-block, set text-align:center on parent */
}
.width {
    width:70%;
}
.minwidth {
    min-width:70%;
}

如果您认为display:table不适合旧浏览器，则应首先关注display:inline-block。 IE6将宽度应用为最小宽度，IE7将应用宽度或全宽度。（块级元素上使用的任何display:inline-block规则都需要针对那两个IES =＆gt; haslayout进行调整：display:inline;和zoom:1;

您可以添加max-width和overflow-x：auto;到#content以避免它在宽度上变大。

最小宽度等于子宽度

2 个答案: