0

左右に浮いて2つの要素が隣り合っています。右側の要素の幅は、動的に増減する子要素のパディングによって動的になります! しかし、左の要素は単純なDIVです。正しい要素の幅に応じて幅を変更したい。どのようにCSSで行うことができますか?

例 ：

<div style="float:left"></div>
<div style="float:right;padding:5px 10px;">
    <a>child1</a> 
    <a>child2</a> 
    <a>child3</a> 
</div>
4

1 に答える 1

2

あなたが達成しようとしていることを100％確信しているわけではありませんが、私が正しく理解していれば：

  • right3つの子を持つ要素をフローティングしているエリアAがあります
  • left要素で埋めたい領域Aの残りの部分

これは正しいです？

最も簡単な方法は、inline-block要素を要素の周りにラップすることです。これrightは、A 領域全体を表し、right要素はこの親要素の右側に浮かんでいます。次に、親に割り当てるすべてのプロパティは、right要素によってカバーされていない領域 A を表します。たとえば、背景色:

    <div style="display:inline-block; width:100%; background-color:blue;">
    <div style="float:right; right:0; padding:5px 10px; background-color:yellow;">
        <a>child1</a> 
        <a>child2</a> 
        <a>child3</a> 
    </div>
    </div>

ここでは、jsfiddle で結果を確認できます: http://jsfiddle.net/rKQXJ/

于 2013-03-26T11:09:10.597 に答える