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を伸ばす方法を見つけることができません。

さらに第3の手として、要素を兄弟の幅に一致させる方法があれば、＃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 に答える