Question

我要在屏幕上显示两个文本块。屏幕宽时，我要这样显示它们：

+---------+  +---------+
| Block B |  | Block A |
+---------+  +---------+

当屏幕狭窄时，我要这样显示它们：

+---------+
| Block A |
+---------+

+---------+
| Block B |
+---------+

请注意，当屏幕缩小时，是右侧的块移动到顶部。

有没有办法用CSS做到这一点？

我想到了这个

.frame {
  border: 2px solid black;
  padding: 1px;
}

#boxA {
  float: right;
  border: 1px solid black;
  text-align: right;
  min-width: 150px;
}

#boxB {
  border: 1px solid black;
}

@media (max-width: 500px) {
  #boxA {
    float: none;
    width: 100%;
    text-align: center;
    height: auto;
  }
  #boxB {
    width: 100%;
  }
}

<div class="frame">
  <div id="boxA">
    Some text<br/> Other text<br/> More text
  </div>

  <div id="boxB">
    Now is the time for all good men to come to the aid of their party. The quick brown fox jumps over the lazy dog. Every good boy does fine. A fool and his money are soon parted. Many visitors enter my jail. Some use no pass. Cry havoc, and let loose the
    dogs of war.
  </div>
</div>

除了我使用float: right以外，几乎可以使用，如果左侧的文本足够长，则它将包裹在右侧的文本下方，这是我们不想要的。我们需要两个不同的列。

我尝试将height: 100%放在#boxA上，但这没用。

请注意，块A的宽度取决于数据，并且我希望块B填充剩余空间。

Answer 1

一种解决方案是使用flexbox：

HTML：

<div class="wrapper">
  <div class="block a">Block A</div>
  <div class="block b">Block B</div>
</div>

CSS：

.wrapper {
  display: flex;
  align-items: flex-start;
}

.block.a {
  order: 1;
}

@media (max-width: 500px) {
  .wrapper {
    flex-direction: column;
  }
  .block.a {
    order: 0;
  }
}

演示：http://jsfiddle.net/1qskxn9y

请注意，块A的宽度取决于数据，并且我希望块B填充剩余空间。

要在视口大于500px时满足此条件，您可以通过以下更改修改上述示例：

.wrapper {
    display: flex;
    // remove this: align-items: flex-start;
}
// add this:
.block.b {
    flex: 1;
}

当小于500px时，每个块将填充视口宽度。

演示：http://jsfiddle.net/1qskxn9y/1/

Answer 2

也可以通过使用浮点数来实现：

HTML：

<div class="block">Block</div>
<div class="block">Block B</div>

CSS：

.block {
    margin: 10px;
    padding: 20px;
    border: 1px solid #000;
    float: left;
    width: 54px;
}
@media (max-width: 500px) {
    .block {
        float: none;
    }
}

演示：http://jsfiddle.net/2nkxvfy8/

屏幕缩小时，将框从右移到顶部

2 个答案: