html - 在响应式设计中使用浮动定位元素时遇到问题

Question

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

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

目前它总是被放置在图像下方。

这里是一个视觉效果。

我需要在不使用绝对定位的情况下找到解决方案，因为标题没有固定高度。事实上，我的 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

Here is one way of doing it for the case of min-width: 909px

The CSS is:

@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 */
    }
}

and the demo fiddle is: http://jsfiddle.net/audetwebdesign/WfyJL/

I did not see anything about heights, so I assume that the content will take determine the various heights of the elements.

How This Works

In your previous example, content2 is floated so its top edge is placed next to the bottom edge of the nearest, adjacent block level element, which is image.

To get the desired layout for the 900px format, float image to the left, and keep content2 in the flow but with a 600px left margin to allow the left floated elements to flow down the left hand side of content2.

Answer 2

也许你需要使用一些像这样的偏移量，希望你的帮助

    <div id="wrapper">
      <div class="row-fluid">
        <div class="span4">
          <h1> some title </h1>
        </div>
        <div class="span4">
          <div id="image"> some img</div>
          <div id="content1"> some content </div>
        </div>
      </div>
      <div class="span8 offset5">
          <div id="content2"> some other content </div>
      </div>
    </div>