html - 在响应式设计中使用 float 定位元素时出现问题

Question

我正在开发一个响应式网站，但在布局时遇到了一些问题。我将问题分解为尽可能少的行。

当窗口大于 909px 时，我想将第二个内容 (content2) 放在标题下方。当可用空间较少时，我希望将其放置在图像下方。

目前它总是放在图片下方。

Here是视觉效果。

我需要找到不使用绝对定位的解决方案，因为标题没有固定高度。事实上，我的 html 元素都没有固定高度，但我有固定宽度。

几个小时以来，我一直在努力想出一个简单的解决方案。希望有人能给我指明正确的方向:)

感谢阅读!

HTML代码:

<div class="wrapper">
  <h1> some title </h1>
  <div class="image"> some img</div>
  <div class="content1"> some content </div>
  <div class="content2"> some other content </div>
</div>

CSS 样式:

.content1{
  float: left;
}
.image{
  width: 600px;
}
.content2{
  width: 300px;
  float: right;
}

@screen and (min-width: 768px) and (max-width: 909px){
  .wrapper {
    width: 700px;
  }
  .content1 {
    width: 300px;
  }
}

@screen and (min-width: 909px){
  .wrapper {
    width: 900px;
  }
  .content1{
    width: 600px;
  }
}

Answer 1

这是针对 min-width: 909px

的一种方法

CSS 是:

@media screen and (min-width: 909px) {
    .wrapper {
        width: 900px;
        outline: 1px dotted blue; /* optional for demo */
    }
    .image {
        width: 600px;
        float: left;
        outline: 1px dotted blue; /* optional for demo */
    }
    .content1 {
        float: left;
        width: 600px;
        outline: 1px dotted blue; /* optional for demo */
    }
    .content2 {
        width: 300px;
        margin-left: 600px;
        outline: 1px dotted blue; /* optional for demo */
    }
}

演示 fiddle 是:http://jsfiddle.net/audetwebdesign/WfyJL/

我没有看到任何关于高度的信息，所以我假设内容将决定元素的各种高度。

这是如何运作的

在您之前的示例中，content2 是 float 的，因此它的上边缘紧挨着最近的相邻 block 级元素(即 image)的下边缘。

要获得 900px 格式的所需布局，请将 image float 到左侧，并保持 content2 在流中，但左边距为 600px 以允许左侧 float 元素流向 content2 的左侧。