代码之家 › 专栏 › 技术社区 › michaelmcgurk

将div定位到容器底部

css html

michaelmcgurk · 技术社区 · 8 年前

我想把桔子块放在div容器的底部而不是顶部。我怎样才能做到这一点?

.container {
  margin-top: 20px;
  margin-bottom: 20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

<div style="background:url('https://dynaimage.cdn.cnn.com/cnn/q_auto,w_826,c_fill/http%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F131126191411-strahov-abbey-library.jpg');height:200px;">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6" style="background:orange">
                        test
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

4 回复 | 直到 8 年前

Llazar 8 年前

你可以看到这个密码 https://jsfiddle.net/fk42dw85/97/

你可以通过以下方式实现:

 position: relative;
bottom: -175px;

Harshal Patel 8 年前

.container {
   margin-top: 20px;
   margin-bottom: 20px;
   position: absolute;
   bottom: 0;
   left: calc(50% - 270px);
}
.parentContainer {
   position: relative;
}

rdarioduarte 8 年前

<div class="container">
  <div class="image"></div>
  <div class="image-footer">
    This is the footer of the image
  </div>
</div>

.image {
  background: url('https://dynaimage.cdn.cnn.com/cnn/q_auto,w_826,c_fill/http%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F131126191411-strahov-abbey-library.jpg');
  height:200px;
}

.container {
  margin-top: 20px;
  margin-bottom: 20px;
}

.image-footer {
  background: orange;
  opacity: 0.8;
}

下面是用这些更改修改的jsfiddle: https://jsfiddle.net/rdarioduarte/fk42dw85/91/

TKD21 8 年前

你也可以试试这个方法 避免使用绝对定位

.container {
  position: relative;
  top: 95%;
  transform: translateY(-50%);
}

调整顶部属性的值 因为你希望得到想要的效果。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前