[英]Position Div vertically down or up using CSS
如何将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; }
使用position:relative
和top:xx%
解决了它。
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.