我有一个必需的布局来构建，它变得比我想象的要难得多。我附上了一个图表，展示了它的外观。我的任务看起来很简单，但我做不到。最大的问题是使用绝对定位（使我的页面混乱）使div D与div A 的底部对齐而不使用 。与此相关的还有需要使div A的高度等于div B的高度，即使其中的内容与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;}
这有点挑战。希望有人能够胜任它。我当然不能。我知道这些并不是全新的主题，但它们似乎是一项任务的独特组合。任何帮助将不胜感激。感谢。
答案 0 :(得分：0)
margin-bottom: 1px; 如果您希望在页面上并排显示两列相同的高度，请使用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;}
有关表格显示的好文章here。
答案 1 :(得分：0)
旧版浏览器的非灵活盒式准解决方案。
有关使用弹性盒的优质解决方案，请参阅my other answer on this page。
将.container设为display: table;，将.A和.B设为display: table-cell;。表根据最高单元格的高度自动渲染单元格高度。
这一壮举需要非常严谨 - 而且正是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>
答案 2 :(得分：0)
如果您不需要旧版浏览器支持，则可以安全地并且非常有效地使用flex-box。
将.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规范在最近的时间发生了变化，并且在浏览器之间存在很大差异。您需要添加前缀并包含旧语法，以涵盖每个主要浏览器的最后几个版本。请参阅Prefixing Flexbox A Complete Guide to Flexbox
中的css-tricks.com垂直定位是弹性盒真正节省时间的地方。
简单地使.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>