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;
}

使用CSS的元素的逆序

2 个答案:

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