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

时间:2018-09-10 01:42:04

标签: html 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>
 
我将保留横幅图像代替“爱栏”文本
因此,现在仅作为参考。
另外,当我做填充顶部时,整个Div row_bottom会向下移动。 enter image description here


更新:
将span更改为div class并尝试了以下CSS,但这并没有给我我想要的东西。

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

更新后图片
enter image description here

1 个答案:

答案 0 :(得分:0)

使用position:relativetop:xx%解决了这个问题。
谢谢