如何在响应式页面布局中定位div-containers？

时间：2013-05-05 08:41:19

标签： css html css-float

据我所知，“绝对”标签不会对我主题的响应式设计起作用。

如果我使用适当的数字来定位我的图像div容器以获得全宽度窗口（反之亦然），如果我收紧我的brwoser窗口，它将不会与其他元素一起浮动。

enter image description here

enter image description here

我认为在弄清楚自己之前需要一大堆时间。

2 个答案:

答案 0 :(得分：0)

从图像中取出最小宽度，它将正确重新调整大小。最小宽度限制它正确地重新调整大小。为了阻止它变小，你可以使用最小宽度，使其小于700px，因为它只是一个小的跳跃大小。您还可以使用媒体查询在该屏幕尺寸上使其宽度为70％。

我认为这是你想要它做的事情？

答案 1 :(得分：0)

position: absolute应该很少用于页面布局（此处和那里的小元素除外），因为它从文档流中获取元素，这意味着其他元素无法响应它。

您可以通过将狗图像向右浮动并使用“沙袋”效果将其向下推入文本来获得您想要的效果。以下是其工作原理的基本示例：

http://codepen.io/anon/pen/uymJI 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.outer {overflow: hidden;}

.wrapper {width: 50%; margin: 0 auto;}

.image {
  float: right;
  margin-right: -600px;
}

.image:before {
  content: " ";
  height: 300px;
  width: 1px;
  overflow: hidden;
}
</style>

</head>
<body>
<div class="outer">
    <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

        <div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>



        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
</div>

</body>
</html>

编辑：基于下面的评论，另一个（尽管最终不充分）尝试：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.outer {overflow: hidden;}

.wrapper {width: 50%; margin: 0 auto; }

.ofl {overflow: hidden;}

.image {float: right; margin-right: -600px;}

.map {clear: both; }

.map div {width: 100%; height: 300px; background: green;}

@media only screen and (min-width: 1500px) {
    .image {margin-top: 0;}

    .dog {margin-top: -258px;}

    .spacer {float: right; width: 300px; height: 265px; background: white;}

    .map {margin-top: 258px;}

    .spacer:before {
        content: " ";
        height: 300px;
        width: 1px;
        overflow: hidden; 
        }
}
</style>

</head>
<body>
<div class="outer">
    <div class="wrapper ofl">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>



        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p><div class="spacer"></div>



        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

    </div>

    <div class="wrapper dog">
        <div class="image"><img src="http://podstrigis.com/wp-content/uploads/2013/05/1dreamstime_xxl_25491444.png" alt="Dog listening on can phone"></div>
        </div>
    <div class="wrapper ofl map">
        <div></div>
    </div> 
</div>

</body>
</html>
相关问题
最新问题