CSS div挑战：将div高度设置为另一个div； 将div对齐到包含div的底部-无需绝对定位

Question

我要构造一个必需的布局，结果比我想实现的要困难得多。 我提供了一个图表，显示了它的外观。 我的任务似乎很简单，但是我做不到。 最大的问题是在不使用绝对定位的情况下使div D与div A的底部对齐（弄乱了我的页面）。 同样与此相关的是，即使div A中的内容比div B中的内容少，也需要使div A的高度等于div B的高度。

我的图： http : //tinypic.com/r/sxln60/8

HTML：

<div class="container">

<div class="A">
<div class="C">Align to top</div>
<div class="D">Align to bottom</div>
</div><!--end A-->

<div class="B">
<img src="images/picture.jpg"/>
</div><!--end B-->

</div><!--end container-->

CSS：

.container {border: 1px solid #999; width:49%; box-sizing:border-box;  display: inline-block; padding: 20px; vertical-align: top;} /*This container is an inline element with another neighboring inline-block element*/
.A {width:39%; display:inline-block; vertical-align: top;}
.C {font-size: 1.5em;}
.B {width:60%; display:inline-block; vertical-align: top;}
.D {font-size: 1.2em;}

这有点挑战。 希望有人能做到这一点。 我当然不能。 我了解这些不是全新的主题，但是它们似乎是一项任务中它们的独特组合。 任何帮助将不胜感激。 谢谢。

Answer 1

1. 使div D与div A的底部对齐应该相对简单，除非我遗漏了一些东西。 尝试将以下规则添加到.D选择器-
   margin-bottom: 1px;
   由于div D嵌套在div A内 ，因此其底边距将始终比div A底边距高1px。

2. 每当您在页面上并排看到两列要相等高度的列时，请使用display: table规则。 此规则允许以表格的形式表示数据。 请注意，如果要显示本质上呈表格形式的数据，则应使用table元素。
   无论如何，回到我们A和B问题的高度，重新构造您的HTML，使其可以表格形式表示数据。

    <div class="tableContainer"> <div class="tableRow"> <div class="A"> <div class="C">Align to top</div> <div class="D">Align to bottom</div> </div> <div class="B"> <img src="images/picture.jpg"/> </div> </div> </div> 

在这里，最外面的div代表整个表格。 最外面的div中的每个div代表表中的一行。 行div中的每个div代表该行中的一列。 优点是，连续的列的高度相等！

这是相应的CSS（启用了边框，因此您可以自己确认高度。

.tableContainer {border: 1px solid #999; width:49%; box-sizing:border-box;  display: table; padding: 20px; vertical-align: top;} /*This container is an inline element with another neighboring inline-block element*/
.tableRow {display: table-row;}
.A {width:39%; display:table-cell; vertical-align: top;border: 1px solid;}
.C {font-size: 1.5em;border: 1px solid;}
.B {width:60%; display:table-cell; vertical-align: top;border: 1px solid;}
.D {font-size: 1.2em;border: 1px solid;margin-bottom: 1px;}

此处提供有关表格显示的好文章。

Answer 2

适用于旧版浏览器的非灵活框准解决方案。

有关使用flex-box的高级解决方案，请参阅此页面上的其他答案 。

---

.A高度= .B高度

设置.container以display: table; .A和.B display: table-cell; 。 表格会根据最高单元格的高度自动使单元格高度相同。

.C对齐顶部，.D对齐底部

这一壮举需要相当多的技巧-而这正是flex-box旨在解决的问题。 但是，由于我不知道您需要什么样的旧版浏览器支持，因此我将向您展示一个非灵活解决方案。

浮动.C并将其width: 100%以及padding-bottom: 100%并抵消负margin-bottom 。

然后给.D 100％ padding-top向下推。

结合起来，这会给单元格增加一点额外的高度，但是这是没有弹性盒或绝对定位时可以达到的最佳效果。 并且它允许两个div具有动态高度。

 * { box-sizing: border-box; } .container { display: table; width: 100%; padding: 20px; vertical-align: top; border: 3px solid #999; } .A { display: table-cell; overflow: hidden; width: 40%; border: 3px solid cyan; } .B { display: table-cell; width: 60%; vertical-align: top; border: 3px solid magenta; } .C { float: left; width: 100%; margin-bottom: -100%; padding-bottom: 100%; font-size: 1.5em; border: 3px solid yellow; } .D { padding-top: 100%; font-size: 1.2em; border: 3px solid black; } 

 <div class="container"> <div class="A"> <div class="C">C: Align to top</div> <div class="D">D: Align to bottom</div> </div> <div class="B"> B: <img src="http://placehold.it/300x200" /> </div> </div> 

Answer 3

使用弹性盒

如果您不需要旧版浏览器支持，则可以安全有效地使用flex-box。

.A高度= .B高度

将.container设置为display: flex; 。 现在，它是一个伸缩容器， .A和.B自动成为伸缩项。

在.container ，设置align-items: stretch; 使.A和.B拉伸以填充容器。

可以声明其他flex属性以进行更多控制。 我将它们包括在下面，以供您参考，但是大多数都只是设置为其默认值。

.container {

    /* Flex container properties */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: flex-start;
    justify-content: space-between;

    width: 50%;
    padding: 20px;
    border: 3px solid #999;
}

注意：flex规范在最近一段时间内发生了变化，并且在浏览器之间也有很大的不同。 您将需要加上前缀并包括旧语法，以涵盖每个主要浏览器的最后几个版本。 请参阅： 加前缀Flexbox将在一个完整的指南了flexbox在css-tricks.com

.C对齐顶部，.D对齐底部

垂直定位是flex-box真正节省一天的地方。

只需将.A为flex容器（一个元素可以同时是flex项和flex容器）。 设置flex-direction: column; 和justify-content: space-between; 。

现在.C和.D是弹性项目，它们将从上到下均匀分布：第一个项目在顶部，最后一个项目在底部； 如果您还有其他物品，它们会在它们之间平均分配。

.A {

    /* Flex container properties */
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    overflow: hidden;
    width: 40%;
    border: 3px solid cyan;
}

 * { box-sizing: border-box; } .container { /* Flex container properties */ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; align-content: flex-start; justify-content: space-between; padding: 20px; border: 3px solid #999; } .A { /* Flex container properties */ display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; width: 40%; border: 3px solid cyan; } .B { width: 60%; border: 3px solid magenta; vertical-align: top; } .C { width: 100%; font-size: 1.5em; border: 3px solid yellow; } .D { font-size: 1.2em; border: 3px solid black; } /* Flex box prefixes */ .container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; -webkit-align-content: flex-start; -ms-flex-line-pack: start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; } .A { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; } 

 <div class="container"> <div class="A"> <div class="C">C: Align to top<br /></div> <div class="D">D: Align to bottom</div> </div> <div class="B"> B: <img src="http://placehold.it/300x200" /> </div> </div>