html - float block 到其他内容的右侧

Question

我读过一些标题相似的解决方案，但没有一个是针对这种布局的解决方案。

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

但是，当内容变得过宽时，我想显示一种稍微不同的格式。

我想在右边显示媒体，用文本在左边显示标题和文本> 标题 正下方。它目前位于 media block 下方(根据代码段)。

有人知道我该如何解决吗？

.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) 您需要为您的文本 block 添加宽度，因为现在它是 100% 并且它占用父 block 宽度的 100% - 所以不会 float 。

2) 您需要向文本 block 添加一个具有 left 值的 clear 属性 - 因为您不需要它被左侧的标题 float 。

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

.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