0

製品のリストがあります。製品がページを下に進み、サイドバーを通過すると、ページの左側からずっと表示され始めます。製品が最初から右にとどまるようにする必要があります。

サイドバーと製品コンテナーに col-1、col-2 クラスを指定し、それぞれに次のものがあります。

    .col-1 {
    float: left;
    width: auto;
    height: auto;
    display: block;
    float: left;
}

.col-2 {
    width: auto;
    height: auto;
    display: block;
    margin-left: 20px;
}

私は clear:both を css のフロートの後に入れました。これをjsfiddleに投稿しますが、Twitterのブートストラップ要素を使用しているため、私のサイトをここにリンクするのが最善です:

http://jordancharters.co.uk/dev/test1/products.php

*更新 - 他のページでこのクラスを複数回使用するため、幅と高さを AUTO に保つ必要があります。

4

3 に答える 3

0

問題は、左の列が左に浮いていることです。つまり、それより右側のすべてがその列をラップします。この画像を見てください。ここに画像の説明を入力

たとえば、これら2つの列のクラスを定義しようとすることができます

.col {
  display: block;
  float: left;
}

次に、それぞれに幅 (または最大幅) を指定します。

.col-1{
  max-width: 300px;
  // or width: 33%;
}
.col-2{
  max-width: 660px;
  //or width: 66%;
}

幅を適用したくないことはわかっていますが、これは、醜いハックなしで必要なものを取得する適切な方法です。.containerまた、高さ 0 の問題を回避するために clearfix を与えるために、これらの列を何らかの種類の内部に配置することもお勧めします。

<div class="container">
  <div class="col col-1">
    Your column 1
  </div>

  <div class="col col-2">
    Your column 2
  </div>

</div>

.container:before,
.container:after {
    content: "";
    display: table;
} 
.container:after {
    clear: both;
}
.container {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

ここおよび他の場所で見つけることができる Clearfix メソッド: http://css-tricks.com/snippets/css/clear-fix/

于 2013-10-26T13:30:57.473 に答える
0

の幅に等しく設定margin-leftします。.col-2.col-1

.col-2 {
    width: auto;
    height: auto;
    display: block;
    margin-left: 220px;
}
于 2013-10-26T13:26:05.377 に答える