1

各div内にボタンがある親div内に2つのdivを追加しようとしています。2 番目の div のみの幅をピクセル単位で修正する必要があり、1 番目の div の幅を % にして、1 番目の div 内のボタンがブラウザーのスペース全体を覆うようにする必要があります。

% ですべての幅が必要です。また、html 構造と css は既に実装されているため変更したくないので、css プロパティを変更するだけです。

これが私のデモ http://jsfiddle.net/zuyyT/2/です

PS : ブラウザーをスケーリングすると、2 番目の div が次の行に表示されます。一度縮尺して確認してください。

4

4 に答える 4

1

これはあなたが必要とするものかもしれません。:-)

.block_right{
    position :absolute;
    right:0;
    top:0;
    float:right; width:130px; background-color:#CC9
}
于 2012-07-11T11:16:37.793 に答える
1

Fiddle はオンとオフで動作しています... 2 つの方法のいずれかを実行できます。フロートの使用 (マークアップの順序を変更する必要があります) または配置 - そのような...

<div class="block">
    <div class="block_right"><a href=""> <span>last button</span></a> </div>
    <div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>

そしてあなたのCSS ...

.block {
    display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
    background-color:#C93; margin-right: 150px;  
}
.block_left a{
    background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
    float:right; width:130px; background-color:#CC9
}

... position を使用して、.block に追加してから .block_right; に追加する必要がありposition:relativeますright:0。.block_left のマージンを維持する

配置を使用すると、マークアップ内の要素の順序を変更する必要がなくなります (問題になるはずです)。

于 2012-07-11T11:12:21.047 に答える