2

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 元素放在大屏幕上的文本之前。

有任何想法吗？

/// 编辑 - 转移到回答（抱歉混乱）

4

2 回答 2

2

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

技巧 1：使用绝对定位

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

技巧 2：双链接

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

于 2013-09-04T15:17:48.927 回答
0

多亏了上面的建议，我终于决定打破纯语义结构并将.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

于 2013-09-04T21:20:55.560 回答