html - 使用 CSS 将 Div 垂直向下或向上定位

标签 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 类并尝试了以下 css,但它没有给我想要的东西。

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

更新图片后
enter image description here

最佳答案

使用 position:relativetop:xx% 解决了它。
谢谢

关于html - 使用 CSS 将 Div 垂直向下或向上定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52250041/

相关文章:

css - 在 Jira 的小工具中加载资源

html - 内容后面的 Bootstrap 导航栏

javascript - 使用jquery将json导入到html输入字段

html - 如何隐藏 <i class ="abc">content</i> 的内容(字体很棒)

javascript - 带有图像的两列文本 block

css - Bootstrap 附加菜单在菜单项单击时中断

html - 如何在 CSS 中的 Font Awesome 图标旁边输入文本 block ?

javascript - JavaScript 语法包含 <%..%>

javascript - 使用PhantomJS提取html和文本

用于管理视口(viewport)布局的 Javascript 库