web-dev-qa-db-ja.com

2つの浮動列-1つは固定、1つはゆるい幅

私はSOを見回しましたが、私の発生に一致するものを見つけることができません、私は基本的に2つの列に1つの固定幅（185px）があり、他の列には固定幅がありませんが、最後の列を埋める必要があります最後のスペース、例えば.

...........................................
.---------  ------------------------------.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  +                            +.
.+       +  ------------------------------.
.+       +                                .
.+       +                                .
.+       +                                .
.---------                                .
...........................................

2番目の列が残りの幅を埋めるとき、最初の列は常に100％である必要があります。両方ともleftにフロートされます。ブラウザウィンドウのサイズを変更すると、2番目の列は最初の列の下に表示されます残りの幅を埋め、ブラウザウィンドウのサイズを変更するときに柔軟に対応するために、2番目の列が必要です。

htmlcsscss-float
40
MacMac

this をご覧ください。デモはありませんが、前にこの男のチュートリアルを使用したことがあるので、うまくいくと思います。記事から、主な内容は液体であると思います。サイドコンテンツも液体かもしれませんが、固定幅を与えてそのままにしておくことができると思います。ここでのコツは、メインコンテンツを最初に配置することです。

2
Zomxilla

実際には、フロートを使用するよりも簡単な方法があります。

.container {
    position: relative;
}

.left {
    width: 185px;
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    margin-left: 185px;
}
64
Jacob

負のマージンを使用することで このチュートリアルから CSSは次のようになります

html, body, .container {
    height:100%;
    padding:0;
    margin:0;
}
.container {
    min-width: 300px;
}
.left {
    float:left;
    width: 185px;
    margin-right: -185px;
    height:100%;
}
.right {
    margin-left:185px;
}

http://jsfiddle.net/Y5FAT/1/

http://jsfiddle.net/Y5FAT/

8
Stano

今回はフレックスボックスを使用してソリューションを編集し、flex: 185px 0 0;を使用して左側の列を修正し、flex-grow:1を使用して右側の列を自動拡張しました

*{
  box-sizing: border-box;
}

body{
  padding:0;
  margin:0;
}

#container{
  display:flex;
}

#left{
  height: 100vh;
  flex: 185px 0 0;
  background-color:tomato;
}

#right{
  flex-grow: 1;
}

#right > div{
  background:pink;
}
  <body>
    <div id="container">
      <div id="left"> Left </div>
      <div id="right">
        <div>
        Right <br/>
        dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf  dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf   dsafasfadf dsafdsfasdf asfasdf adfasdf dsafasfadf dsafdsfasdf asfasdf adfasdf 
        </div>
      </div>
    </div>
  </body>
6
Gerard Banasig

「位置：絶対;」答えはかなり良いですが、特にIE向けに開発している場合は、クロスブラウザの意味合いがあります。これを達成する最良の方法は次のとおりです。

<html>
<head>
<style>
    div.right {
        float: right;
        width: 200px;
    }
    div.left {
        margin-right: 200px;
    }
    div.clear {
        clear: both;
    }
</style>
</head>
<body>
    <div class="right"><!--your code here--></div>
    <div class="left"><!--your code here--></div>
    <div class="clear"></div>
</body>
</html>

右側で必要なdivがHTMLで最初に呼び出されることに注意してください。また、列の後のフロートのクリアに注意してください。これは、下にコンテンツがある場合、または親コンテナがある場合に便利です。

2
Delgado Bonito

私はこれにつまずくまで、上記の解決策のほとんどすべてを試しましたが、それは私にとって素晴らしく機能します。 残りの水平スペースを埋めるためにdivを作成する方法（非常に単純ですが、CSSの専門家にとっては厄介な問題）

理由は定かではありませんが、固定幅の列のみをフロートさせる必要があるようです。残りはちょうど所定の位置に収まります。

1
Mars Mellow

フロートも絶対配置も使用したくない場合、私が思いつく最も簡単な方法は

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        white-space: nowrap;
      }
      div.left {
        display: inline-block;
        width: 200px;
        white-space: normal;
        background-color: red;
        vertical-align: top;
      }
      div.right {
        display: inline-block;
        white-space: normal;
        background-color: green;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
  </body>
</html>
1
Sebastian

まあ、承認された答えは良いものですが、ここでもっと探している人のためのリンクがあります。これが役立つことを願っています。 ;）

http://www.dynamicdrive.com/style/layouts/category/C13/

1
Andrei Surdu