将div对齐到容器的底部

Question

我认为这很简单，我需要将内部div（绿色和蓝色）对齐到容器的底部（红色）。我希望不要使用绝对定位，我需要它是ie6,7,8 ff chrome safari等兼容。

<div style="border:1px solid red;">
    <div style="border:1px solid green; width:20px; height:20px; float:left;"></div>
    <div style="border:1px solid blue; width:20px; height:30px; float:left;"></div>
    <div style="clear:both;"></div>
</div>

我尝试使用vertical-align但找不到简单的解决方案。

感谢您的帮助，p。

编辑这是我对abs pos解决方案的尝试：

<div style="border:1px solid red; position:relative;">
    <div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div>
    <div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div>
    <div style="clear:both;"></div>
</div>

Answer 1

为什么不能使用绝对定位？垂直对齐不起作用（表除外）。让你的容器的位置：相对。然后使用bottom绝对定位内部div：0;应该像魅力一样工作。

编辑zoidberg（我将更新答案）

<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;">
   <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div>
   <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div>
</div>

Answer 2

现代的方法是使用flexbox，在容器上添加align-items: flex-end;。

有了这个内容：

<div class="Container">
  <div>one</div>
  <div>two</div>
</div>

使用此风格：

.Container {
  display: flex;
  align-items: flex-end;
}

https://codepen.io/rds/pen/gGMBbg

Answer 3

我也不喜欢绝对定位，因为几乎总会有一些附带损害，即无意的副作用。特别是在使用响应式设计时。 似乎有另一种选择 - 沙袋技术。通过插入＆＃34;帮助＆＃34;元素，无论是在CSS的标记中，我们都可以将元素向下推到容器的底部。有关示例，请参阅http://community.sitepoint.com/t/css-floating-divs-to-the-bottom-inside-a-div/20932。

Answer 4

我来这里是为了寻找答案，但忘记了我已经知道答案 - 而且非常简单： def get_purchase_order_expiry_date(self): company_list = [] current_date = datetime.today().replace(microsecond=0) curr_start_date = current_date.replace(hour=00, minute=00, second=00, microsecond=0) curr_end_date = current_date.replace(hour=23, minute=59, second=59, microsecond=0) for rec in self: lang = self.env.context.get("lang") langs = self.env['res.lang'] if lang: langs = self.env['res.lang'].search([("code", "=", lang)]) format_date = langs.date_format or '%B-%d-%Y' current_date2 = str(current_date) new_date = datetime.strptime(current_date2, DEFAULT_SERVER_DATETIME_FORMAT) + relativedelta( days=rec.expiry_offset) new_start_date = new_date.replace(hour=00, minute=00, second=00) new_end_date = new_date.replace(hour=23, minute=59, second=59) company_ids = self.env['res.company'].search([]) for company in company_ids: expiring_po = self.env['purchase.order'].search( ['&', '|', '&', ('date_planned', '>=', str(new_start_date)), ('date_planned', '<=', str(new_end_date)), ('date_planned', '>=', str(curr_start_date)), ('date_planned', '<=', str(curr_end_date)), ('state', 'in', ['purchase', 'done']), ('company_id', '=', company.id)]) if expiring_po: po_list = [] for p_orders in expiring_po: due_date = datetime.strptime(p_orders.date_planned, DEFAULT_SERVER_DATETIME_FORMAT).strftime( format_date) po_list.append({'product_name': p_orders.product_id.name, 'po_name': p_orders.name, 'vendor_name': p_orders.partner_id.name, 'scheduled_date': due_date}) if po_list: company_list.append({'company_name': company.name, 'expiring_po': po_list}) return company_list 和 display: flex。

您需要做的就是为您的容器提供 margin-top: auto 的 display 和您想要的物品在底部的顶部边距 flex：

auto

.container {
  display: flex;
}

.box {
  margin-top: auto;
}

也不需要浮动或清除。

Answer 5

你可以作弊！假设你的div是20px高，将div放在下一个容器的顶部并设置

position: absolute;
top: -20px;

它可能在语义上不干净，但可以通过响应式设计进行扩展

Answer 6

我解决此问题的方法是使用flexbox。通过使用flexbox布局容器div的内容，可以使flexbox自动将可用空间分配给您想要“粘在底部”的项目上方的项目。

例如，假设这是您的容器div，其中包含其他一些块元素，而蓝色框（向下的第三个框）是一个段落，紫色框（最后一个）是您要保留的框到底部”。

通过使用flexbox设置此布局，您可以仅在段落（蓝色框）上设置dset[dset < 0] = 0 ，如果只有flex-grow: 1;可以设置flex-grow: 1;，则将为其余部分分配所有内容空间，将元素之后的元素推到容器底部，如下所示：

（为这些可怕的，肮脏的图形表示歉意）