2

我正在尝试在导航栏下方创建一列内容，以使内容的宽度与导航栏的宽度完全匹配。事实证明这比我预期的要困难。

鉴于这样的事情：

<div id="Wrapper">

    <!-- nav should all be on one line. #Wrapper should stretch to hold it-->   
    <nav> 
        <ul>  
            <li>link 1</li>
            <li>link 2</li>
            <li>etc</li>
        </ul> 
    </nav>

    <!-- article should not stretch #Wrapper, even if it is wider than nav -->
    <article>
        <h1>title</h1>
        <p>This should be constrained to nav's width, 
            even if by all rights it would be wider</p>
    </article>
</div>

我正在尝试实现这样的目标：

+-----------------------------+
|    +-------------------+    |
|    |+-----------------+|    |
|    ||link 1 link 2 etc||    |
|    |+-----------------+|    |
|    |+-----------------+|    |
|    ||TITLE            ||    |
|    ||this should be   ||    |
|    ||constrained to   ||    |
|    ||nav's width, even||    |
|    ||if by all rights ||    |
|    ||it would be wider||    |
|    |+-----------------+|    |
|    +-------------------+    |
+-----------------------------+

我可以在#Wrapper 上设置固定宽度，但是如果字体发生变化或缩放，那么导航栏将与文章的宽度不匹配。

另一方面，我找不到一种方法来允许导航栏拉伸#Wrapper，同时防止文章进一步拉伸。

另一方面，如果有某种方法可以使元素与兄弟的宽度匹配，我可以完全取消#Wrapper。

4

2 回答 2

1

固定表格布局：水平布局只取决于表格的宽度和列的宽度，而不是单元格的内容。

这可以防止文章的内容拉伸它，进而防止文章拉伸#Wrapper。

article {
    width: 100%;
    display: table;
    table-layout: fixed;
}

例如：http: //jsfiddle.net/CTF9h/

于 2012-12-30T19:22:59.240 回答
0

将文章包裹在另一个 div 中，绝对定位，左右设置为 0px。新的 div 将匹配外部宽度并包含不拉伸的文章。

缺点是，在这种安排之下很难做任何有用的事情。

html:

<div id="Wrapper">
    <nav> 
        <ul>  
            <li>link 1</li>
            <li>link 2</li>
            <li>etc</li>
        </ul> 
    </nav>

    <div id="WidthBinder"> <!-- all further content goes in here -->
        <article>
            <h1>title</h1>
            <p>This should be constrained to nav's width, 
                even if by all rights it would be wider</p>
        </article>
    </div>
</div>

CSS：

li { display: inline; }

body { text-align: center; }
body * { text-align: left; }

#Wrapper {
  display: inline-block;
  position: relative;
}

#WidthBinder {
  position: absolute;
  left: 0px;
  right: 0px;
}

小提琴：http: //jsfiddle.net/yU32B/3/

于 2013-01-13T06:45:07.903 回答