Question

我正在一个响应式网站上工作，我在布局时遇到了一些麻烦。我把问题分解为尽可能少的线路。

当窗口大于909px时，我想将第二个内容（content2）放在标题下方。如果空间较小，我希望将其放置在图像下方。

目前它始终位于图像下方。

Here是视觉效果。

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

我一直试图想出几个小时的简单解决方案。这里希望有人能指出我正确的方向：）

感谢阅读！

HTML code：

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

和演示小提琴是：http://jsfiddle.net/audetwebdesign/WfyJL/

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

如何运作

在上一个示例中，content2浮动，因此其上边缘位于最近的相邻块级元素的底边附近，即image。

要获得900px格式的所需布局，请向左浮动image，并在流程中保留content2，但左边距为600px，以允许左浮动元素向左流动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>

在响应式设计中使用浮动来定位元素的麻烦

2 个答案: