0

私は完全な初心者で、次のページに取り組んでいます：http: //mockingbirdagency.com/thebox/tvshow.html

右に引くコンテナ（float：rightで右側のブロックを保持）は下部に浮かんでいるので、これを指定する必要がありました。

#pull-right-tv {
    float: right;
    margin-top: -1362px;
    width: 330px;
}

そのため、ページの上部から開始します。今度は毎回何かを変更すると、ブロックが動き回り、お尻が痛くなります。これを回避する方法はありますか？私は何を間違えましたか？

4

3 に答える 3

4

CSS を少し調整します。

#pull-right-tv {
    margin-top: -1362px;  /* Delete this */
}

#pull-left {
    float: left;          /* Add this */
    width: 600px;         /* Change this from 960 to 600
                             so it won't push the other column out of the way */
}

#content {
    overflow: auto;       /* Add this so the parent retains its height
                             when its children are floating */
}
于 2012-12-20T00:34:01.590 に答える
0

ここで起こっているいくつかの問題..

  1. 165 行目 - クラス "" の最後の "s" がありません
  2. 左引きの幅を設定します。
  3. pull-right を 'float: left' に変更します。ここで右にフロートすることもできますが、要素を同じ方向にフロートすることを学ぶ方が良いと思います。これは、レスポンシブ レイアウトの開発を開始するときに非常に便利です (今すぐ学習を開始する必要があります)。
  4. 適切な margin-left をプル ライト コンテナーに設定します。

これで問題が解決します：

.pull-left {
    float: left;
    width: 610px;
}

#pull-right-tv {
    float: left;
    margin-left: 20px;
    width: 330px;
}

また、常に命名規則に一貫性を持たせるようにしてください。たとえば、これらは主要なコンテンツ コンテナーなので、#content や #sidebar などを使用すると、後でコードに戻る必要があるときに簡単に認識できるようになります。

ID または CLASS の使用に関する最後の言及... 簡単な経験則は、上記の 2 つのセレクターなど、一度使用されるものには ID を使用することです。ページ内で複数回参照される他のすべてのものは、CLASS セレクターを使用する必要があります。

于 2012-12-20T00:49:05.860 に答える
0

私がすることは、右の列で行ったように、左の列を div で囲み、右の列の右のフロートではなく、左の列に float:left を配置することです。少なくとも私にとっては、右にフローティングするものは常にエラーが発生しやすいものでした。

また、あなたが@$$の苦痛だと言っているように、あなたが今行っているような負のマージンの使用には非常に注意します。

于 2012-12-20T00:33:42.913 に答える