使用CSS將Div垂直向下或向上放置

Question

如何將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">男性脳と女性脳（１）すれ違いが起きる原因</dt> <dd class="more_link text-warning">read more</dd> </dl> </a> </div> </div> </div> </div> </div> 

我將保留橫幅圖片代替“愛欄”文字
所以現在這只是參考。
另外，當我做填充頂部時，Whole Div row_bottom向下移動。

更新：
將span更改為div class並嘗試了以下CSS，但這並沒有給我我想要的東西。

 .lovecolumnbanner { border: 4px solid pink; padding-top: 10px; padding-bottom: 14px; } 

更新圖片后

Answer 1

使用position:relative和top:xx%解決了它。
謝謝