18

私は2つあり<div>ます：左と内容。これら2つは、。を持つラッパーdiv内にありますmin-width:960px;。左は固定幅ですが、最小幅700pxでコンテンツを柔軟にしたいので、画面が広い場合は画面の右境界に貼り付けます。
スクリーンショット

CSS：

#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
}
#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    min-width:700px;
    margin-left:10px;
    width:auto;
    float:left;
    background-color:AppWorkspace;
}

JSFiddle： http: //jsfiddle.net/Zvt2j/

4

5 に答える 5

10

あなたはあなたにできoverflow:hiddenます#content。このように書いてください：

#content
{
    min-width:700px;
    margin-left:10px;
    overflow:hidden;
    background-color:AppWorkspace;
}

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

于 2013-01-14T13:34:23.653 に答える
5

css3フレキシブルボックスを使用できます。次のようになります。

まず、ラッパーは多くのものをラップしているので、2つの水平フロートボックス専用のラッパーが必要です。

 <div id="hor-box"> 
    <div id="left">
        left
      </div>
    <div id="content">
       content
    </div>
</div>

そして、css3は次のようになります。

#hor-box{   
  display: -webkit-box;
  display: -moz-box;
  display: box;

 -moz-box-orient: horizontal;
 box-orient: horizontal; 
 -webkit-box-orient: horizontal;

}  
#left   {
      width:200px;
      background-color:antiquewhite;
      margin-left:10px;

     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;  
}  
#content   {
      min-width:700px;
      margin-left:10px;
      background-color:AppWorkspace;

     -webkit-box-flex: 1;
     -moz-box-flex: 1;
      box-flex: 1; 
}
于 2013-01-14T13:38:07.743 に答える
2 
#wrapper
{
    min-width:960px;
    margin-left:auto;
    margin-right:auto;
    position-relative;
}
#left
{
    width:200px;
    position: absolute;
    background-color:antiquewhite;
    margin-left:10px;
    z-index: 2;
}
#content
{
    padding-left:210px;
    width:100%;
    background-color:AppWorkspace;
    position: relative;
    z-index: 1;
}

の右側に空白が必要な場合は#left、border-right: 10px solid #FFF;に#leftを追加して、に追加10pxしますpadding-left。#content

于 2014-06-03T00:56:28.237 に答える
1

float：leftとfloat：right divの間のCSS自動調整コンテナは、私の問題を解決しました。コメントありがとうございます。

#left
{
    width:200px;
    float:left;
    background-color:antiquewhite;
    margin-left:10px;
}
#content
{
    overflow:hidden;
    margin-left:10px;
    background-color:AppWorkspace;
}
于 2013-01-14T13:34:22.797 に答える
1

私はあなたのjsfiddleを更新しました、そしてここにあなたがする必要があるCSSの変更があります：

#content
{
    min-width:700px;
    margin-right: -210px;
    width:100%;
    float:left;
    background-color:AppWorkspace;
}
于 2013-01-14T13:36:42.980 に答える