0

ここにこのセットアップ用の CodePen があります: http://codepen.io/anon/pen/Isqou

div.linksBox {
border:1px solid #a9a9a9;
background:#fff;
-moz-box-shadow:0 5px 12px rgba(0,0,0,0.3);
-webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3);
box-shadow:0 5px 12px rgba(0,0,0,0.3);
margin:0 12px 12px 0;

text-align:center;
overflow:hidden;
}

<div id="topFloats" style="margin-top:5px; overflow:hidden; border:1px solid black; margin-top: 10px;">
    <div style="width:20px; height:340px; float:left; background-color:red;"></div>
    <div id="rightFloatWrapper" class="linksBox">
        <div class="rollover linkIconLayout" id="" style='width: 134px; height: 122px; background-color:green;' href=""></div>
        <div class="rollover linkIconLayout" id="" style='width: 142px; height: 112px; background-color:blue;' href=""</div>
    </div>
</div>

赤 (左) のフローティング div のイメージは、黒枠の div の高さを設定します。黒枠の div の残りのスペースを埋めるために展開するには、内部 (ドロップ シャドウ) div (コンテンツ div のサイズによって最小寸法が設定されます) が必要です。

ドロップ シャドウの div からフロートを取り除き、オーバーフローを追加し、マージンをドロップ シャドウに対応するように設定することで、水平方向のスペースを埋めることができました。残りの垂直スペースを埋めるにはどうすればよいですか?

4

1 に答える 1

1

解決しました。私はフロートを放棄position:absolute;right:0; bottom:0;top:0;し、内側の（ドロップシャドウされた）divで使用することになりました。トリックは、 a を使用しright:5%、(以前はフロートされていた) 赤の div 幅を同じ ( width:5%) に設定することでした。これにより、フローティング div でやろうとしていたことが達成され、リキッド レイアウトの柔軟性が維持されます (幅を変更する場合は、プロパティも変更する必要があるという小さな欠点がありright:ます)。

うまくいけば、これはこれを試みる他の誰かを助けるでしょう.

乾杯！

于 2014-10-16T19:50:19.357 に答える