Question

我已经阅读了一些具有类似标题的解决方案，但没有解决方案。

我有3个内容块，它们在大多数屏幕宽度下都堆叠在一起。

然而，当内容变得过宽时，我希望显示稍微不同的格式。

我想在右侧显示媒体，在左侧显示标题和文字，文字直接位于标题下方。它目前位于媒体块下方（根据代码段）。

任何人都知道如何解决它？

.content {
  overflow:hidden;
}

.chart {
  height: 200px;
  width: 200px;
  background-color: red;
}

.title, .text {
  float:left;
}

.media {
  float:right;
}

<div class="content">
  <h3 class="title">This is a reasonably long title</h3>
  <div class="media">
    <div class="chart"></div>
  </div>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non urna est. Quisque sed dolor ac ex aliquet aliquet. Integer ornare, velit vitae iaculis faucibus, nulla libero molestie sem, eget placerat augue massa vitae justo.</p>
</div>

Answer 1

您需要做两件事：

1）你需要为你的文本块添加一个宽度，因为它现在是100％并且需要父块宽度的100％ - 所以不会浮动。

2）您需要将clear属性添加到文本块，其值为left - 因为您不需要将其从左侧的标题中浮动。

这就是解决问题所需的一切：

.text {
  clear: left;
  width: 50%; /* put your own width (no matter percents or pixels), but it must be less than (parent block width - media width)*/
}

点击示例：https://codepen.io/fox_hover/pen/8f838b7799db7a3ed4f4d742097440ef

Answer 2

虽然之前的答案在某种程度上都有效，但两者都未能完全解决最初的问题。

第一个要求改变元素的顺序，第二个要求固定宽度是限制性的。

最终解决方案分为两部分，因此适用于多种屏幕尺寸和媒体查询。

首先，我根据答案1改变了元素的顺序。这使我能够实现我的8列（宽布局）所需的布局。我使用仅限8列的媒体查询来应用此样式。

对于所有其他屏幕尺寸，我使用display flexbox，它允许我恢复我需要的顺序。

浮动块到其他内容的右侧

2 个答案: