Html 避免使用带有绝对定位的Jquery更改页面

我有一个设置了多行的页面。每行有两列。第二列是隐藏的，直到单击按钮，然后通过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>

{{name.title | truncatechars:50}


位置：{{name.Location{truncatechars:50}}

开始日期：{{name.Start | truncatechars:50}}

结束日期：{{name.End | truncatechars:50}
{{name.title}}

---

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

您可以为此使用目标伪类

加成

---

您可以添加一个JSFIDLE吗？这还不够，因为在您的示例中，您的列大小相同。我的右栏比左栏大，这就是我加载页面时页面向下移动的原因。@Xonal我更新了小提琴，所以右栏变大了。对不起，我真的不清楚。高度更大。@Xonal I更新了小提琴，因此右边的颜色更高

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

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