0

以前にここで質問されたにもかかわらず、これを理解できないのは本当にばかげていると感じます。しかし、スライダー div を画像 + マップとテキスト コンテンツ div の真下に配置できない理由を誰でも説明できますか (これら 2 つを上に、1 つを左に、もう 1 つを右に配置する必要があります)。明らかに、絶対位置の使用が正しくありません。どんなアドバイスも素晴らしいでしょう。どうも。

<style> 

#container .container_body .images {
    float: left;
}

#container .container_body .content {
    float: right;
    width: 355px;
}

#container .container_body {
    margin-bottom: 35px;
    background-color: pink;
    font-size: 22px;
}

.slider-container { 
    background-color: red;
    /*position: absolute;*/
}

.content {
    background-color: blue;
}

.images {
    background-color: green;
    /*position: absolute;*/
}

</style> <!-- /.style -->


<!-- container ALL -->
<div id="container">

  <!-- container BODY -->
  <div class="container_body">
    <p>container body here.</p>

    <!-- IMAGES -->
    <div class="images">
        <p>images here.</p>
    </div> <!-- /.images -->

    <!-- TEXT CONTENT -->
    <div class="content" style="width: 366px;">
          <p>text content here.</p>

          <!-- map -->
        <div class="map">
            <p>map media here.</p>
        </div><!-- /.map -->

    </div><!-- /.content -->
  </div> <!-- /.container_body -->

  <div class="slider-container"><!-- slider -->
     <p>slider here.</p>
  </div><!-- /.slider -->

</div><!-- /#container -->
4

2 に答える 2

5

clearフローティング要素がある場合、フローティング要素の下に配置する要素にプロパティを適用する必要があります。そのような、

.slider-container {
   clear:both;
}

bothjustの値は、要素を下に移動して、左右のフローティング要素をクリアすることを示します。float:left;上記の例では、これは宣言と宣言の両方をカバーする必要がありますfloat:right;。

上記のスタイルを既存のマークアップに適用すると、スライダーは意図したとおりに画像とテキストの下に配置されます。これが私のjsfiddleのコピーです。

于 2013-01-29T01:39:07.927 に答える
1

画像 div が左に浮いているので、右側に表示できる html の下のすべてのコンテンツが表示されます。

次に、次の div である content が右に浮いています。同じ y 位置に表示されますが (前の div が左に浮いているため)、画面の右側に固定されます。次の div であるスライダーは、コンテンツ div の左に移動し、イメージ div の右に移動します。したがって、スライダーは途中で終了します。

次のように、コンテンツ div で適切なプロパティと相対的な位置を使用してみてください。

#container .container_body .content {
    /*    float: right;*/
    position:relative;
    right: 0px;
    width: 355px;
}

これは明確な修正ではありません（画像の div に幅を追加する必要があります。そうしないと、カバーされる可能性があると思います）が、要求したように下のスライダー div を強制します。

于 2013-01-29T01:37:37.337 に答える