如何将div内部的div垂直向下或顶部放置。
到目前为止,我已经做了什么。
.lovecolbanner {
margin-top: 10px;
}
<div class="row_bottom">
<div class="lovecolbanner">
<span class="lovecolumnbanner">Love Column</span>
</div>
<div class="col-sm-3 col-xs-12">
<div class="pickup_item">
<a href="http://azlily.bex.jp/eccube_1/html/user_data/post06">
<div class="item_photo"><img src="{{ app.config.front_urlpath }}/img/column/09.jpg"></div>
<dl>
<dt class="item_name text-warning">恋愛やダイエットに関わる脳内物質</dt>
<dd class="more_link text-warning">read more</dd>
</dl>
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="pickup_item">
<a href="http://azlily.bex.jp/eccube_1/html/user_data/post02">
<div class="item_photo"><img src="{{ app.config.front_urlpath }}/img/column/08.jpg"></div>
<dl>
<dt class="item_name text-warning">未婚じゃなくて、非婚です!</dt>
<dd class="more_link text-warning">read more</dd>
</dl>
</a>
</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="pickup_item">
<a href="http://azlily.bex.jp/eccube_1/html/user_data/post08">
<div class="item_photo"><img src="{{ app.config.front_urlpath }}/img/column/10.jpg"></div>
<dl>
<dt class="item_name text-warning">男性脳と女性脳(1)すれ違いが起きる原因</dt>
<dd class="more_link text-warning">read more</dd>
</dl>
</a>
</div>
</div>
</div>
</div>
</div>
row_bottom
会向下移动。
更新:
将span更改为div class并尝试了以下CSS,但这并没有给我我想要的东西。
.lovecolumnbanner {
border: 4px solid pink;
padding-top: 10px;
padding-bottom: 14px;
}
答案 0 :(得分:0)
使用position:relative
和top:xx%
解决了这个问题。
谢谢