3

サイドバーとコンテンツエリアがあります。サイドバーを左に、コンテンツ領域を右にフロートさせました。しかし、画面サイズが変わると問題が発生します。2つのフロートの間にかなりのスペースがあります。コンテンツエリアの画像のサイズと、右に浮いているためだと思います。したがって、このコンテンツ領域も左側にフロートしました。現在、コンテンツ領域は画面の右端まで拡張されていません。コンテンツ領域をスペースなしで適切な部分に収める方法はありますか（サイドバーとコンテンツ領域を分割するスペースだけで十分です）？

さらに説明が必要な場合は、お知らせください。

4

4 に答える 4

2

CSSを次のように変更します。

.dashContent {
     float: left;
     margin: 10px;
     position: relative;
     top: 25px;
     min-width: 80%;
}

.sidebarDash {
    float: left;
    height: auto;
    width: 195px;
}

これにより、スペースが削除され、レイアウトの流動性も維持されます-OPが固定レイアウトを必要とするため、削除されました

于 2012-10-09T06:25:25.790 に答える
1

サイドバーの幅と同じように配置.sidebarDashしadsolute position、padding-left.dashContent

これら2つを1つのメインDIVに次のようにラップします-

<div class="dashContainer">

  <div class="sidebarDash"></div>
  <div class="dashContent"></div>

</div> <!-- Clears the float with CSS -->

CSS-

.dashContainer{ overflow: hidden; position: relative }
.sidebarDash { position: absolute; left: 0; top: 0; width: 200px; }
.dashContent { padding: 0 0 0 210px; }

jQuery-

これをドキュメントのセクションに挿入<head>します-

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script type="text/javascript">
  $(function(){
    var sidebarHeight = $('.sidebarDash').height(); 
    $('.dashContainer').css('min-height', sidebarHeight);
  })
</script>
于 2012-10-09T06:06:57.760 に答える
0

float：rightを使用する代わりに、float：leftを使用して、両方のdivが一緒にとどまるようにします。このフィドルを見てください。

http://jsfiddle.net/FZZnk/

これで問題が解決するかどうか教えてください

于 2012-10-09T06:24:08.457 に答える
0

まず、すべてのdiv幅に対してパーセントを使用する必要があります。次に、両方を同じ側（右または左）にフロートさせ、マージンまたはパーセント単位のパディングを使用して、これらのdiv間のスペースを作ることができます。

.dashContainer{ overflow: hidden; width: 100%; }
.sidebarDash { float: left; width: 20%; }
.dashContent { float: left; width: 80%; }

これで、左側のサイドバーの幅とフロートが固定されているため、これを行うことができます。フロートを右側に削除し、サイドバーのサイズにマージン左を追加します。divをwidth：100％に設定することを忘れないでください。

.dashContent {
    float: right;
    margin-left: 210px;
    position: relative;
    top: 25px;
    width: 100%; }
于 2012-10-09T06:30:45.163 に答える