html - 避免使用绝对定位的 Jquery 更改页面

Question

我有一个设置了多行的页面。每行有两列。第二列是隐藏的，直到单击按钮，然后用 Jquery 显示。问题是当它出现时，它会将整个页面向下移动。我试过使用 position:absolute，但它被放在第一列的顶部。我需要避免使用任何类型的“左、右等”修饰符，因为我需要它在不同大小的屏幕上正确渲染。如何让它出现在适当的位置？

我的代码是：

    <div class="row">
  <div id="event" class="span8" onclick="preview({{ name.event_id }})">
     <strong>
    {{ name.title|truncatechars:50 }}
     </strong> <br>
    Location: {{ name.location|truncatechars:50 }} <br>
    Start Date: {{ name.start|truncatechars:50 }} <br>
    End Date: {{ name.end|truncatechars:50 }} 
    <a onClick="event.stopPropagation()" class="page btn btn-primary btn-small" href="/eventsearch/eventsearch/event/{{ name.event_id }}">Event Page</a>
  </div>
  <div id="block{{ name.event_id }}" class="span4 block">{{ name.title }} </div>
</div>

第一列应该是#event，第二列是#block

Answer 1

您可以为此使用目标伪类。

小提琴

标记

<div class="row">
  <div class="col col1">Col1
    <a class="showCol" href="#row1">Show Col2</a>
  </div>
  <div id="row1" class="col col2">Col2</div>
</div>

CSS

.row
{
    clear:both;
}
.col
{
    width:50%;
    float:left;
    height: 60px;
    line-height: 60px;
    margin-bottom: 10px;
}
.col1
{
    background: orange;
}
.col2
{
    display:none;
    background: green;
}
.col2:target
{
    display:block;
}
.showCol
{
    float: right;
    display:inline-block;
}