使用 CSS 逆序排列元素

Question

我正在设计一个文字广告的样式，并想更改某些文字的位置，但我无法访问标记，因此我尝试仅使用 CSS 来完成它。

现在，它在一行显示一个 h2，在下一行显示一个锚标记，并在其下方显示一个段落：

ad title
          right-aligned ad link
ad text......................
.............................

相反，我希望它与锚点上方的段落一起显示：

ad title
ad text......................
.............................
left-aligned ad link

我使用标记和当前 CSS 创建了一个 jsfiddle。另外，值得一提的是，我不支持早于 IE9 的 IE。

任何帮助将不胜感激，谢谢！

Answer 1

有时您可以使用table-caption 技巧来解决此任务。不是每个人都知道表格可以有标题元素，也可以使用caption-side 属性将其移动到底部。所以我们可以用display属性来模拟它：

.a-item {
    display: table;
}
.a-item .site {
    ...
    display:table-caption;
    caption-side: bottom;
}

演示：http://jsfiddle.net/Uw8BG/5/

您也可以使用 Flexbox，但直到 IE10 版本（旧语法）才能在 IE 中工作。不过这个技巧在 IE8+ 中也可以使用。

Answer 2

正如@Dryden Long 建议的那样，您应该看看this answer。

我已经用正确的 CSS 更新了你的 fiddle。

h2 {
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}
.a-item h2 a{
  float:none;
}
.a-item p a {
  float:none;
}
.a-item .site{
  text-align:left;  
  display:block;
  margin-bottom:10px;
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  box-ordinal-group: 3;
}
p {
  display: block;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  margin:10px 0 5px 0;
}
.a-item {    
  display: -webkit-box;
  display: -moz-box;
  display: box;

  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.a-item p {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
}