1

div 内に 3 つの div-s があります。500px高さのある赤い領域に画像を配置したいです。赤い高さ領域を固定し500px、他の div-s を引き伸ばしてページを埋めたいのですが、わかりません。ホットフィット、テストも50%各青いdiv-sに配置されましたが、機能しませんでした。

<html>
   <head></head>
   <body>
     <div>
        <div style="background-color: blue; height:100%"></div>
        <div style="background-color: red;height:760px"></div>
        <div style="background-color: blue;height:100%"></div>
     </div>
   </body>
</html>

私が欲しいもの

4

2 に答える 2

3

私の解決策：

<style>
    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        zoom: 1;
    }

    .main{
        background: yellow;
        height: 100%;
        display: table;
        min-width: 100%;
    }

    .box{
        background: blue;
        width: 100%;
        height: 100%;
        display: table;
    }

    .image{
        background: red;
        width: 100%;
        height: 100px;
        display: table-row;
    }
</style>

<div class="main">
    <div class="box">#1</div>
    <div class="image">#2</div>
    <div class="box">#1</div>
</div>
于 2013-07-25T22:11:56.213 に答える
0

最も簡単な解決策：テーブルを使用します（html5のおかげでレイアウトに再び有効であり、それはプレゼンテーションの役割属性です）

「最新の」ブラウザー (少なくとも IE 8) で動作します: css display table + display: table-cell などを使用して、他の要素でテーブル レンダリングを使用します。

JavaScript がある場合に機能します: JavaScript を使用します。これはほとんどの場合遅れており、JS エンジンでエラーが発生したときにファイルされる可能性があるため、これは最後の手段 (または実際にはそれを過ぎた場合) にする必要があります。例 (説明付き) はこちらにあります: http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/

視覚効果のみの場合: 青と高さ 100% のコンテナー div を使用し、その中の赤を中央に配置します (繰り返しますが、これを実現する方法は複数あります。たとえば、表、表の表示 + CSS の垂直方向の配置などです。 )

正しいHTML5ソリューションについて（W3C仕様に従ってロール属性マークテーブルをプレゼンテーションとして使用）

<table style="width:100%;height:100%;border-collapse:collapse" role="presentation">
    <tr>
        <td style="background-color: blue;"></td>
    </tr>
    <tr>
        <td style="background-color: red;height:760px"></td>
    </tr>
    <tr>
        <td style="background-color: blue;"></td>
    </tr>
</table>

ここでフィドルの作業を完了します (css 部分も正しく機能するために重要です): http://jsfiddle.net/8jFan/

HTML5 + テーブルに関する追加情報:

http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#table-layout-techniques

一方では、表をレイアウトの修正に使用することはお勧めできません (「表はレイアウトの補助として使用しないでください」)。一方、仕様では、レイアウトのために表を使用する方法を説明しています。テーブルは - css の代替とは対照的に - 下位互換性が非常に高いため (そのため、ほとんどのニュースレターで使用されています)、css の「表示属性ハック」よりも優れた選択肢のように思えます。

于 2013-07-25T21:48:54.160 に答える