0

次のHTMLのスタイルを設定するのに最適な方法について、ここで専門家のアドバイスを探しています。

<body>
-Some content-
<div class="parent" style="height:50%;">
<div class="child" style="background-color:#FF9999;">An image</div>
<div class="child" style="background-color:#9999FF;">Some text</div>
</div>
</body>

次のように動作する結果を取得するには、次のようにします。

ここに画像の説明を入力してください

私が取り組んでいる基準は次のとおりです。

  • コンテナdiv、.parentはブロック要素であり、ブラウザウィンドウの幅全体を埋めます。
  • そこに行く画像の規則性に基づいて、最初/左の内側のdivの幅をピクセル単位で知っていますが、パーセンテージではわかりません。
  • 2番目/右の内側のdivの幅がわかりません-ブラウザウィンドウの幅に関係なく、右側のスペース全体を自動的に埋める可変量のテキストが含まれているためです
  • 最初の/左のdivの高さは、2番目の/右のdivよりも短い場合、同じ高さまで伸びる必要があります（理由は次のとおりです。最初の/左のdivには、2番目の/右のdivと区別するための右境界線があります、およびこの境界線は.parent divの高さである必要があります。ただし、最初/左のdivが常にマークアップに存在するとは限りません。この場合、境界線は表示されません）。
  • JavaScriptのトリックは使えません。

私の経験とWebソースからの支援に基づいて試したソリューション：

  1. Float：float：leftを使用する従来の方法では、最初/左のdivをその兄弟または.parentの（可変）高さまで伸ばすことができないようです。

  2. インラインブロック：.parent {background-color：＃999999;} .parent> .child {display：inline-block; vertical-align：top; height：100％;}

display：inline-blockを使用すると、2番目/右のdivのテキストが行全体を埋めるのに十分でない場合に、魅力のように機能するように見えます。ただし、テキストが増えると、2番目/右のdivは外側のコンテナが許可する幅になり、最初の/右のdivの下に折り返されます。

どんな洞察も大歓迎です！

4

2 に答える 2

1

テーブルベースのマークアップを使用することは答えではありません。ただし、IE7以下をサポートする必要がない場合は、display:tableこれを解決するために使用できます。私が一緒に投げたこのデモンストレーションをチェックしてください。2番目の子divのコンテンツの量を編集して、効果を確認します。

display：tableを示すjsfiddle

.parent {
  display:table;
}

.child {
  display:table-cell;
}

基本的に、要素にテーブルのように機能するように指示しparent、2つのchild要素にテーブルセルのように機能するように指示します。これにより、アクセシビリティの問題やhtmlテーブルの余分なマークアップなしでテーブルレイアウトの利点が得られます。ただし、前述したように、これはIE7では機能しません。古いIEサポートが必要な場合は、あまり適切でない回避策に頼る必要があります:(

于 2012-11-14T04:10:09.833 に答える
0

テーブルの評判は悪くなっていますが、これは1つのアプリケーションとしては適しています。

<body>
    -Some content-
    <table class="parent" style="height:50%;">
        <tr>
            <td class="child" style="background-color:#FF9999;" width="10">An image</td>
            <td class="child" style="background-color:#9999FF;">Some text</td>
        </tr>
    </table>
</body>

幅を最小に設定すると、それが大きくてもコンテンツが押し上げられ、どの列が高くても、コンテンツボックス全体が押し下げられます。

于 2012-11-14T02:56:14.480 に答える