Question

我有一个html结构，如下面的小提琴http://jsfiddle.net/szpali76/62frb9n6/3/

<div>
<div id="user">
    <div>John Smith, premium user</div>
</div>
<div class="post">
    <div>
        <div class="postTitle">This is a really long long long title with lot of contents ... fgdsfgdfgdsfgdsfgdfgg dsdfgsdfgdfgdsfgfg dfsdfgdsfgdsfgdfg dsf gsdfgsdfgdsfgdfhdfghdfgdfghfdghfghsfgdfsgsdfgdsfgdsgdsf</div>
        <div class="postContent">gsdfgdsfgdfsgdfsgdsfg</div>
        <div class="reply"><a>Reply</a></div>
    </div>
</div>

而css是

.postTitle {
   font-weight: bold;
   padding: 10px;
   background-color: yellow;
}
#user {
    margin-top: 20px;
    padding: 10px;
    color: white;
    background-color: green;
}
.postContent {
   background-color: orange;
   padding: 10px;
}
.reply{
   background-color: brown;
   padding: 10px;
}

是否有一种CSS方法可以在标识名上设置id ='user'的样式，并使用postTitle类名将其推送到div下面，我无法更改HTML结构。 div.postTitle根据用户输入更改其内容，因此它没有固定高度。

Answer 1

我不这么认为。如果你不能改变HTML那么你将不得不使用JS，因为CSS不能根据后来的元素调整前一个元素的属性< / p>

Jquery解决方案

＆＃13;

def

＆＃13;

$(document).ready(function() {
  $("#user").clone().insertAfter('#postTitle');
  $("#user").remove();
});

＆＃13;

.postTitle {
  font-weight: bold;
  padding: 10px;
  background-color: yellow;
}
#user {
  padding: 10px;
  color: white;
  background-color: green;
}
.postContent {
  background-color: orange;
  padding: 10px;
}
.reply {
  background-color: brown;
  padding: 10px;
}

＆＃13;

Answer 2

这可能是一个糟糕的解决方案，但这里有：

#user {
position:absolute;
...
}

使用它来定位你的其他元素，使用jQuery也可以使用纯javascript来完成。

var titleHeight = document.getElementById('postTitle');
var userHeight= document.getElementById('user');
$("#user").css("margin-top",titleHeight.clientHeight)
$(".postContent").css("margin-top",userHeight.clientHeight)

JSFIDDLE example

希望它有所帮助。

CSS3根据兄弟姐妹的孩子身高设定div余量

2 个答案: