文章/答案/技术大牛

发布

社区首页 >问答首页 >浮动容器内的对齐元件绝对底部(左、右浮动)

问浮动容器内的对齐元件绝对底部(左、右浮动)
EN

Stack Overflow用户

提问于 2013-03-04 14:19:31

回答 2查看 1.4K关注 0票数 0

我想将文本对齐到容器的底部。我知道我可以在容器上使用position: relative;，在内部元素上使用position: absolute; bottom: 0;来实现这一点。但是，我有这样的浮动元素：

    float: left;                 .align-bottom (and also float: left)
++++++++++++++++++++++++++++++++++++++++++++++++
+     #blah                    |               +
+                              |               +
+ Title            btn1 btn2   | TEXT          +
++++++++++++++++++++++++++++++++++++++++++++++++

左边的浮动元素有一个非固定的大小。

如何使用CSS和HTML将文本对齐到正确容器的底部？

到目前为止，我已经尝试过：

.align-bottom {
  /* the 2nd floated element, on right side */
  position: relative;
  overflow: auto;
  height: 100%;
}
.align-bottom div {
  position: absolute;
  bottom: 0;
}

CSSDesk：http://cssdesk.com/kNE98 (像jsFiddle，但没有JS)

我看到了一些与此相关的问题(虽然不是两个浮动容器)，包括：Vertical Align with Absolute Positioning，但是这并没有多大帮助，因为浮动部分的高度是相同的。

html

css

css-float

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-03-04 14:38:49

因此，我在两列周围添加了一个父包装器，您希望它们的高度相同，同时还添加了一个cf (clearfix)类，使包装器成为浮动元素的全部高度。然后，我设置元素的宽度(29%)，使其很好地位于“左”div的右侧。使用绝对位置并将其设置为底部:0允许它很好地坐着。

下面是具有正确代码的cssdesk链接：http://cssdesk.com/SjSFQ

问候

票数 0

Stack Overflow用户

发布于 2013-03-04 14:35:56

body{position:relative}
.align-bottom {
  position: absolute;
  bottom: -50px;
}

不要签入CSSDesk，因为iframe有100%的高度，它会将底部div发送到页面的底部。但是有了这个代码，div将位于身体底部。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15212232

复制

YouTube API

php api youtube 视频搜索

YouTube API 能够让你搜索 YouTube 上的视频并且把它们显示在你的站点上。而且可以让你通过 API 上传视频。

Denis

2023/04/13

1.7K0

rails api+react+jwt验证教程

ruby

5.在models的application_record.rb中添加has_secure_password字段

不知雨

2019/01/14

1.5K0

「简单实战」YouTube Iframe API 的使用

api html 云点播

业务需求需要在自己的网页上嵌入油管（ youtube ）上的视频，所以去踩了油管 IFrame Player API 的坑。其实和大多数国内视频网站的 ifram Embed 方式是相似，比如说爱奇艺、腾讯视频、优酷等。在这些视频网站上你会发现都有分享功能，其中有一项就是通用代码。油管提供的 IFrame Player API 也是类似的方案。

拾贰

2019/08/28

4.4K0

Rails MVC 和 CRUD(12)

edit model title 基础

保存成功就直接显示，如果保存失败，就重绘 new 页面，new 页面中加入了对错误信息的显示

franket

2021/11/25

2620

Rails MVC 和 CRUD(3)

ruby on rails

要在 Rails 中显示“My first test” 的静态页面，需要新建一个控制器和视图

franket

2021/11/24

7260

Rails MVC 和 CRUD(5)

html

创建了一个叫 ArticlesController 的类，继承自 ApplicationController

franket

2021/11/24

3460

Rails MVC 和 CRUD(7)

http

(这里的 /articles 明明对应两个方法，GET、POST ，有点不太明白，为什么这样指定就一定成了POST请求)

franket

2021/11/24

2010

Rails MVC 和 CRUD(9)

数据

保存数据修改 create 方法，对提交的数据进行保存 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new end def create # render plain: params

franket

2021/11/25

1940

Rails MVC 和 CRUD(15)

ruby html ruby on rails grep 数据库

点击【Destroy】后会根据我们的定义弹出提示连续删除几次后所剩无几目前已经通过 Rails 实现了文章的新建、显示、列出、更新、删除操作 ---- 命令汇总 rails server -b 0.0.0.0 rails generate controller welcome index cat app/views/welcome/index.html.erb vim config/routes.rb grep -v " #" config/routes.rb | grep -v

franket

2021/11/25

3590

Rails MVC 和 CRUD(2)

mvc 编程算法数据库 sql

MVC 分块设计有助于管理复杂的应用程序，因为可以在一段时间内只用关注一个方面；例如，可以在不依赖业务逻辑的情况下专注于视图设计；同时也让应用程序的测试更加容易；MVC 分层同时也简化了分组开发；不同的开发人员可同时开发视图、控制器逻辑和业务逻辑

franket

2021/11/24

3790

Rails MVC 和 CRUD(13)

edit

定义 update 方法，并且添加 edit 链接和 show 链接 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new @article = Article.new end def

franket

2021/11/25

1710

Rails MVC 和 CRUD(8)

数据库数据结构迁移 model 继承

再次提交一回 ---- 创建模型 Rails 提供了一个生成器用来创建模型 [root@h202 blog]# bin/rails generate model Article title:string text:text Running via Spring preloader in process 13216 invoke active_record create db/migrate/20160422140912_create_articles.rb c

franket

2021/11/25

2740

Rails MVC 和 CRUD(1)

ruby on rails mvc ruby

franket

2021/11/24

3510

Rails MVC 和 CRUD(10)

再次加载可以成功显示了 ---- 列出所有文章 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new end def create # render plain: params[:ar

franket

2021/11/25

1900

Rails MVC 和 CRUD(6)

api action form 表单源码

不过，通过查看源码，我们可以看到 action 部分指向的是当前页面 action="/articles/new" ，而这个页面 (Restfull API) 应该是用来进行显示的，而不是进行处理的

franket

2021/11/24

2740

Rails MVC 和 CRUD(11)

back

列表页面多出来两个链接，点击【New article】成功跳转到了添加页面，随便输入点什么，提交自动跳转到了显示页面，点击【Back】跳转回了所有列表页面 Tip: 之所以每做一次修改都能直接生效，是因为在开发模式下（默认），每次请求 Rails 都会自动重新加载程序，因此修改之后无需重启服务器 ---- 数据验证我们常常有对输入进行校验的需求，以避免接受到了无效或不合规范的数据 [root@h202 blog]# vim app/models/article.rb [root@h

franket

2021/11/25

2800

Rails MVC 和 CRUD(14)

删除文章在 controllers 中定义 destory 方法然后在 index 视图中加入 Destroy 链接 [root@h202 blog]# vim app/controllers/articles_controller.rb [root@h202 blog]# cat app/controllers/articles_controller.rb class ArticlesController < ApplicationController def new @article

franket

2021/11/25

2230

Rails MVC 和 CRUD(4)

api action route 日志

结果展示了当前的一系列 Restfull API 与 Controller#Action 的对应关系

franket

2021/11/24

4170

Rails布局和视图渲染

渲染 http ruby on rails html json

基于“多约定，少配置”原则，在 index 动作末尾并没有指定要渲染的视图，Rails会自动在控制器的视图文件夹中寻找 action_name.html.erb 模板，然后渲染。这里渲染的就是 app/views/books/index.html.erb

用户1515472

2019/07/24

3.4K0

rails -help

ruby on rails

rails new APP_PATH [选项] //APP_PATH项目名称

不知雨

2018/11/13

2.6K0

相似问题

如何防止CSS动画在页面加载？

如何让webrat / selenium“等待”页面的CSS加载？

防止CSS3动画在页面加载后触发

页面加载后等待元素加载

Jquery等待/页面加载

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问浮动容器内的对齐元件绝对底部(左、右浮动)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

如何防止CSS动画在页面加载？

如何让webrat / selenium“等待”页面的CSS加载？

防止CSS3动画在页面加载后触发

页面加载后等待元素加载

Jquery等待/页面加载

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浮动容器内的对齐元件绝对底部(左、右浮动)EN

回答 2

Stack Overflow用户

Stack Overflow用户

如何防止CSS动画在页面加载？

如何让webrat / selenium“等待”页面的CSS加载？

防止CSS3动画在页面加载后触发

页面加载后等待元素加载

Jquery等待/页面加载

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浮动容器内的对齐元件绝对底部(左、右浮动)
EN