1

我正在使用position: absolute;，所以我的 div 可以放在底部，但我还需要使用float: left;，以便将每个新 div 放在它旁边，但它们只是被放置在同一个位置，有什么建议吗？

<!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

jsFiddle 演示

为了在网页底部浮动 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 回答
2

如果所有 div 具有相同的position:absolute属性，那么它们都将重叠。

为要在底部显示的 div 设置一个父 div。position:absolute并使用and设置这个父 div 的样式bottom:0

继承人JSFIDDLE 。我希望这是你想要的。

于 2013-01-11T23:38:13.557 回答