1

据我所知，“绝对”标签不会与我的主题的响应式设计相匹配。

如果我将我的图像 div 容器定位为全宽窗口的正确数字（反之亦然），如果我收紧我的 brwoser window ，它将不会与其他元素一起浮动。

在此处输入图像描述

在此处输入图像描述

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

4

2 回答 2

0

从图像中删除最小宽度，它将正确调整大小。最小宽度限制它正确调整大小。为了阻止它变小，您可以使用最小宽度，只需使其小于 700 像素，因为这只是尺寸上的一个小跳跃。您还可以使用媒体查询使其在该屏幕尺寸下的宽度为 70%。

我想这就是你想要它做的？

于 2013-05-05T09:17:48.517 回答
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>
于 2013-05-05T09:18:08.953 回答