12

私はこれを何年もの間整理しようとしてきたので、助けが必要です。必要なもの：

2列のレイアウトがあり、左側の列の幅は220pxに固定されており、右側の列の幅は流動的です。

コードは次のとおりです。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; float: left; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
    </div>
</body>
</html>

全く問題ありません。css構文clearを使用すると、両方とも右側の列で、以降のすべてのコンテンツが左側の列の下に移動します。これは正しい行動であり、それに反対するものではありません。

しかし、私は本当にクリアを使用する必要があります：両方の方法で、それが右の列のコンテキストにちょうど留まるようにします（左の列の影響を受けず、下に移動しません）

ページデザインの基本的なフロートの概念を維持するための簡単な回避策はありますか？

更新：私の説明から少し混乱するかもしれないので、私が何について話しているのかを知るためにこのリンクを見てください。リンク： http： //jsfiddle.net/k4L5K/1/

4

3 に答える 3

25

変更した CSS は次のとおりです。

html, body {
    background: #ccc;
}

.wrap {
    margin: 20px;
    padding: 20px;
    padding-right:240px;
    background: #fff;
    overflow:hidden;
}

.main {
    margin: 0 -220px 0 auto;
    width: 100%;
    float:right;
}

.sidebar {
    width: 200px;
    float: left;
    height: 200px;
}

.main, .sidebar {
    background: #eee; min-height: 100px;
}

.clear { clear:both; }
span { background: yellow }

基本的に、私が行ったことは、レイアウトの方法を変更して、.maindiv が右側に浮かぶようにすることです。これを行うには、2 つのことを追加する必要がありました。

  1. .wrapdivの 240px のパディング、および
  2. .main-220pxの div の右マージンは、ページの可変部分を適切に配置します。

.main右側の div をフロートしたため、必要に応じて は divclear: both;内のコンテンツにのみ影響.mainします。

ここでデモンストレーションを見ることができます: http://jsfiddle.net/6d2qF/1/

于 2011-07-23T00:29:06.383 に答える
-2

これを試して：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; float: left; }
        .clear {clear:both;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
        <div class="clear"></div>
    </div>
</body>
</html>
于 2011-07-22T23:39:27.683 に答える