Question

HTML：

<div class="heading">
  <h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  <a class="action" href="#">Print</a>
</div>

所需的默认外观：

| Lorem ipsum dolor sit      [Print] |
| amet, consectetur adipiscing elit. |

希望在小屏幕上观看（使用媒体查询）：

| Lorem ipsum dolor sit |
| amet, consectetur     |
| adipiscing elit.      |
| [Print]               |

不希望：

|                            [Print] |
| Lorem ipsum dolor sit amet,        |
| consectetur adipiscing elit.       |

不希望：

| Lorem ipsum dolor sit      [Print] |
| amet, consectetur                  |
| adipiscing elit.                   |

说明：

文字可能很长。
动作元素是恒定高度和可变宽度。

我认为只使用CSS无法做到这一点。

现在我使用JS（Harvey lib）将浮动的DOM元素放在大屏幕上的文本之前。

有什么想法吗？

///编辑 - 移动回答（抱歉乱七八糟）

Answer 1

在没有修改标记的情况下，使用CSS实现两种结果都没有简单的方法。但是，您可以使用一些技巧来尝试模拟您想要的行为。

技巧1：使用绝对定位

将链接设置为position:absolute;top:0;right:0;（如果需要，将容器设置为position:relative;）。然后，使用.text::before{display":block;content' ';float:right;}在显示打印链接的位置放置间隙。

技巧2：双重链接

您可以在<h2>之前/之前放置一个链接以向大型显示器浮动，然后隐藏它并在小显示屏上的文本下方显示（以前隐藏的）第二个链接作为块元素。

Answer 2

感谢上面的建议，我最终决定打破纯语义结构并将.action元素放在.text之前，因此它可以通过正确的文本包装轻松浮动。使用约.action元素大小的约束来添加小屏幕所需的行为非常容易：

cssdeck.com/labs/epcoxk7o

HTML：

<div class="heading">
  <a class="action" href="#">Print</a>
  <h2 class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>

CSS：

.action {
  float: right;
  line-height: 20px;
  padding: 5px 70px;
  background: #eee;
}
.text {
  line-height: 30px;
}

@media (max-width: 30em) {
  .heading {
    position: relative;
    padding-bottom: 20px;
  }
  .action {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}

其他解决方案将是@cimmanon建议的：cssdeck.com/labs/9bntxaro

如何使文本可以包装以下，浮动元素？

2 个答案: