2

パディングと固定幅のサイドバーを備えた流動的なコンテンツ領域があります。画像をコンテナと同じfloat: right負の値にして、フローティング画像をサイドバーに隣接させたいと思っています。margin-rightpadding

コードは千の言葉に値する...

問題を示す縮小テスト ケースを次に示します: http://jsfiddle.net/alexdunae/34ZDw/3/ -- プレビュー ペインを縮小または拡大して確認します。

私の負のマージンの計算がどこかでずれているようです。どんな助けでも大歓迎です。

4

2 に答える 2

1

親の代わりに画像の兄弟に 8.xxx% サイド パディングを設定し#innerます。そうすれば、負のマージンは必要ありません。

http://jsfiddle.net/34ZDw/9/

#inner > p {
    padding: 0 8.571428571429%;
}

...

.alignright {
    float: right;
    width: 53.75%;
    margin-left: 5%;
    margin-right: 0; /* <-- this to 0 */
    padding: 0.3125em 0 0.3125em 0.3125em; /* now you can also add your padding */
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
于 2011-12-08T05:15:41.357 に答える
0

うまくいけば、私はあなたが探しているものを理解しました....

私は通常、ページのレイアウトを作成する際にテーブルを使用しないようにしていますが、その場合、幅を変更したい場合は、それまたは div を含む JavaScript のいずれかです。

1 つのルールを覚えていれば、コンテンツ ボックスの右側にグレーのボックスを固定することはそれほど複雑ではありません。最初に固定コンテンツを配置します。

私がやったことは、グレーのボックスを #inner ボックスの内側に浮かせて、パディングとマージンを 0 にすることです。中に入るものは何でも - 必要なパディングがあります。

注: IE 6 はサイド マージンを適切に処理しないため、常にそれらを回避しようとします (代わりにパディングを使用します)。

ここに私の提案するコードがあります:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#layout { width: 100%; border: none; }
#layout #sidebar { width: 180px; }
#inner { float: left; width: auto; background: rgba(0, 255, 0, 0.1); }
#inner p { padding: 0 8.571428571429%; margin: 0px; }
#sidebar { width: 180px; background: rgba(0,0,255, 0.1); }
.alignright { float: right; width: 53.75%; background: rgba(0, 0, 0, 0.5); color: #fff; }

</style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" id="layout">
    <tr>
        <td id="inner" valign="top">
           <p>Fluid width with 8.571428571429% L/R padding</p>
           <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum.</p>
           <div class="alignright">Here is some aligned-right goodness.</div>
           <p>Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id.</p>
        </td>
        <td>
        <td id="sidebar" valign="top">
            <p>Fixed width 180px sidebar</p>
       </td>
    </tr>
    </table>
</body>
</html>

ご覧のとおり - #inner 要素内の要素は必要なパディングを受け取ります

javascriptを避けるために、レイアウトにテーブルを使用しました。私はjsのやり方を好むと述べなければなりません。

それがあなたのためにそれを解決することを願っています

于 2011-12-08T05:15:43.623 に答える