4

私はこれを理解できないので、髪を引っ張っています。私はウィキを開発しています。典型的なページには、右側に固定幅のサイドバーがあります。このサイドバーの左側には、テキスト、div、テーブルなど (ページのコンテンツ) があります。つまり、サイドバーの隣にある場合は、全幅からサイドバーの長さを引いたものにする必要があります。サイドバーの横にない場合は、ページの全幅にする必要があります。このような：

 _______________________________
|                          ___  |
| text text text text te- |   | |
| xt text text text text. | S | | 
| ______________________  | B | |
| |                     | |   | |
| |        table        | |___| |
| |          or         |       |
| |         div         |       |
| |_____________________|       |
|                               |
| more text text text text tex- |
| t text text text text text t- |
| ext text text text text text  |
| ____________________________  |
| |        another table      | |
| |             or            | |
| |            div            | |
| |___________________________| |
|_______________________________|

テキストの場合は、すべてがサイドバーを完全に囲みます。非常に長い文がある場合、サイドバーの左端まで移動してから改行します。非常に長い段落がある場合、すべてのテキストがサイドバーのすぐ横に出て、そのすぐ下にも表示されます。

しかし、私が抱えている問題は、サイドバーの左側に div を配置したいときです。100% に設定すると、div はサイドバーの幅を考慮せず、ページの全幅に拡張されるため、サイドバーと重なります。通常、サイドバーの幅の右マージンを持つように div を設定します。ただし、私の目的では、これは実現可能ではありません。異なる画面解像度では、サイドバーの下のページで div が低くなる可能性があり、div の右側に空白のギャップが生じるためです (さらに、コーディング目的でこの問題を把握しやすくすることで、ページの div が自分自身の幅を知ることができます)。たとえば、上記のテキスト画像で、画面解像度が低いためにページが細くなった場合、最初のボックスはおそらくサイドバーの下にあります。サイドバーの右側にマージンを設定すると、ボックスの右側に大きな隙間ができ、ページの全幅にはなりません。

これは私が使用しているコードです。

<html>
<head>
<style type="text/css">#sidebar {
float: right;
width: 250px;
height: 200px;
border: 1px solid red;
}

#la {
border: 1px solid green;
width: 100%;
}
</style>
</head>
<body>

<div id="content">

    <div id="sidebar">Sidebar with fixed width</div>

    <p>The sun is a star.</p>
    <p>It's yellow.</p>
    <p>It's very hot.</p>

    <div id="la">This div is next to the sidebar and should bump up right next to its left side, as in, 100% of the page minus the width of the sidebar. It should not overlap the sidebar. This is not something that can just be done automatically with margin-right using the width of the sidebar because it might not actually be next to the sidebar on certain screen resolutions.</div>

    <p>The sun is a star.</p>
    <p>It's yellow.</p>
    <p>It's very hot.</p>

    <div id="la">This div is NOT next to the sidebar on most screen resolutions - it is under it where there is nothing to the right of it, so it should be the full width of the page.</div>


</div>

</body>
</html>

div 内のテーブルなど、何かがサイドバーの隣にある場合、ページの最大幅からサイドバーの幅を引いたものになるようにする方法があることを願っています。サイドバーの横にない場合は、ページの全幅です。他のすべてをテキストのように機能させたいだけだと思います-それはその右側にあるものすべてに直接行きます（サイドバーがある場合はサイドバー、サイドバーがない場合はページの右側）。

前もって感謝します！:)

4

1 に答える 1

6

次のように書きます。

CSS

.right{
    float:right;
    width:60px;
    height:60px;
    background:green;
}
.left{
    overflow:hidden;
    border:2px solid yellow;
    background:red;
    height:60px;
}

HTML

<div class="right">right</div>
<div class="left">left</div>

これをチェックしてくださいhttp://jsfiddle.net/rq5WX/

于 2012-06-12T08:10:59.743 に答える