1

position: absolute;divを一番下に配置できるように使用していますが、新しいdivがそれぞれ隣に配置されるように使用する必要もありますがfloat: left;、同じ場所に配置されているだけです。何か提案はありますか？

<!DOCTYPE html>
<html>
<head>
   <style type="text/css">

        .media_container{
                min-width:  800px; max-height: 800px; 
                min-height: 300px; max-height: 300px;
                border: 2px solid #f00; 
                position: relative;
                }

        .media_header{
                min-width:  220px; max-width:  220px;
                min-height: 50px; max-height: 50px;
                border: 2px solid #f00;
                float: left;
                /*position: absolute;*/
                margin-left: 30px;
                bottom: 30px;
                }

    </style>
  <title>Test</title>
</head>


<body>

  <div class='media_container'>

    <div class='media_header'>Header 1</div>
    <div class='media_header'>Header 2</div>
    <div class='media_header'>Header 3</div>

  </div>

 </body>]
4

2 に答える 2

2

すべてのdivが同じposition:absolute属性を持っている場合、それらはすべてオーバーラップします。

下部に表示するdivの親divを用意します。そして、この親divをposition:absoluteとでスタイル設定しますbottom:0

これがJSFIDDLEです。これがあなたの望むものであることを願っています。

于 2013-01-11T23:38:13.557 に答える
2

jsFiddleデモ

Webページの下部にdivをフロートさせるには、コンテナをに設定absoluteして配置する必要がありますbottom。

次に、このコンテナのすべてのコンテンツはrelative、フロート要件に沿っています。終わり！

.media_container {
  position: absolute;
  bottom: 0;
  min-width: 800px;
  max-height: 800px;
  min-height: 300px;
  max-height: 300px;
  border: 2px solid #f00;
}
.media_header {
  position: relative;
  float: left;
  margin-left: 30px;
  margin-top: 30px;
  min-width: 220px;
  max-width: 220px;
  min-height: 50px;
  max-height: 50px;
  border: 2px solid #f00;
}
于 2013-01-11T23:56:48.150 に答える