3

私はコード的に次のように見えるページを書いています

<div class="green">  
  <span class="orange">s1</span>
  <span class="orange">s2</span>
</div>

ただし、CSSを介して次のようにフォーマットする必要があります。 レイアウトの説明

  • 周囲の黒いフレームは、ブラウザのページ全体を示しています。（のことを考えてください<body></body>）
  • 赤いフレームは、CSSによって追加される固定幅と固定高さの基本的に空のスペース.green:beforeです（視覚効果のために境界線をフォーマットする機能を使用しています）
  • <span>緑のフレームは、両方を1行に含めるために必要な幅の実際のコンテンツを示しています
  • 青いフレームはCSSによって作成され、.green:after高さが固定されており、ページの右端まですべてのスペースを占める必要があります。つまり、幅が可変である必要があります。

必要なブラウザは、最近のバージョンの最新のブラウザ（Firefox、Chrome、Safari、Opera）です。IEの世話をする必要はありません。ただし、モバイルブラウザは素晴らしいでしょう。

どうすればそれを達成できますか？（私の試みはすべて遅かれ早かれ失敗しました...）

このサンプルコードを含むjsFiddleは、http： //jsfiddle.net/X2MDG/にあります。

4

1 に答える 1

2

私はあなたのすべての制約を満たす方法がないのではないかと心配しています。CSSソリューションがないように見える主なものは次のとおりです。

  • 緑のビットの幅だけを制御するには、赤:beforeと青の:afterコンテンツの幅に影響を与える必要があります。質問へのコメントで述べているように、別のDOM構造を使用することはできません。
  • 青（:after）のコンテンツは、緑（メイン）のコンテンツに必要のないすべてのスペースを占める必要があります。
  • 赤/青の固定高さは、div全体の下の要素をクリアする必要がある場合があります。

ですから、私が知る限り、あなたが尋ねた質問には100％満足のいく答えはありません。いずれにせよ、これが私がこの問題を研究するために思いついたコードです、おそらくそれはあなたや他の人がこの質問につまずくのを助けることができます。このjsfiddleまたは以下のコードのいずれかを参照してください。

<div id="page">
    <div class="green">
        <span>Orange 1.</span>
        <span>Orange 2. Which can be really wide.</span>
    </div>
    <p style="clear: both;">Black is the page. Clearing is
            needed because the red and blue boxes are not in the 
            flow but do have quite some height.</p>
</div>

CSS：

div#page { 
    border: 2px solid black;
    width: 80%;
    padding: 2px;
}

div.green:before {
    content: 'red / before';
    border: 2px solid red;
    float: left;
    display: inline-block;
    width: 140px;
    height: 200px;
}

div.green {
    border: 2px solid green;
}

div.green:after {
    content: 'blue / after';
    border: 2px solid blue;
    display: inline-block;
    float: right;
    height: 60px;
}

div.green span {
    border: 2px solid orange;
}
于 2012-05-20T14:43:22.300 に答える