好的，所以我将这两个框对齐到外部div的底部，方法是使外部div位置相对，两个内部框位于绝对位置。
这是一个问题的小提琴： http://jsfiddle.net/QEr8L/
<div id="graph-top-bar" class="clearfix">
<section class="brand clearfix">
<img src="images/calc-brand-img.png" alt="" class="hidden-sm">
<div class="content">
<h1 class="brand-title">Brand R Bag</h1>
<h4>Inverted Marking Paint</h4>
<select id="brand" name="brand">
<option value="Brand R Bag" data-value="r-bag">BRAND R BAG</option>
<option value="Brand R Aerosol" data-value="r">BRAND R AEROSOL</option>
<option value="Brand A Aerosol" data-value="a">BRAND A AEROSOL</option>
<option value="Brand S Aerosol" data-value="s">BRAND S AEROSOL</option>
</select>
</div>
</section>
<section class="hidden-sm vs">
<img src="images/calc-vs.png" alt="VS">
</section>
<section class="krylon clearfix">
<div class="content">
<h1 class="krylon-title">Krylon Industrial 17oz</h1>
<h4>Inverted Marking Paint</h4>
<select id="krylon" name="krylon">
<option value="Krylon Industrial 17oz" data-value="17">17oz</option>
<option value="Krylon Industrial 22oz" data-value="22">22oz</option>
</select>
</div>
<img src="images/calc-krylon-img.png" alt="" class="hidden-sm">
</section>
</div>
这是CSS：
#graph-top-bar {
background: #474747;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #474747 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #474747 0%,#000000 100%);
background: -o-linear-gradient(top, #474747 0%,#000000 100%);
background: -ms-linear-gradient(top, #474747 0%,#000000 100%);
background: linear-gradient(to bottom, #474747 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#000000',GradientType=0 );
padding: 20px;
position: relative;
}
#graph-top-bar .brand {
width: 48%;
position: absolute;
float: left;
bottom: 20px;
}
.hidden-sm {
display: none;
}
#graph-top-bar h1 {
font-style: italic;
font-size: 150%;
word-wrap: break-word;
}
#graph-top-bar h4 {
font-weight: normal;
font-size: 80%;
margin-top: -5px;
}
#graph-top-bar select {
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #959595 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#959595));
background: -webkit-linear-gradient(top, #ffffff 0%,#959595 100%);
background: -o-linear-gradient(top, #ffffff 0%,#959595 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#959595 100%);
background: linear-gradient(to bottom, #ffffff 0%,#959595 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#959595',GradientType=0 );
border: 1px solid #000;
font-size: 80%;
padding: 6px;
font-weight: bold;
}
#graph-top-bar .krylon {
width: 48%;
position: absolute;
text-align: right;
right: 0;
bottom: 20px;
}
#graph-top-bar .krylon {
text-align: right;
}
select {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: inset 0 0 7px #8c8c8c;
-webkit-box-shadow: inset 0 0 7px #8c8c8c;
box-shadow: inset 0 0 7px #8c8c8c;
border: 1px solid #b3b3b3;
background: #fff;
color: #3b3b3b;
display: inline-block;
height: 35px;
text-indent: 15px;
line-height: 29px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
假设看起来像这样： http://jsfiddle.net/4cKy2/
但我需要将它定位到底部，以便当h1标签开始包裹在两条线上而另一条不开始时......它开始变得锯齿状。您可以在最小化浏览器时看到它。
感谢您提供任何帮助。我不明白为什么文字不会脱离黑色背景而黑色背景也不会缠绕在它周围..
感谢您的帮助！
答案 0 :(得分：1)
绝对位置意味着：其父级的绝对坐标，，不考虑包装，黑色背景或其他。 由于绝对定位会将元素从HTML流中拉出来：您的黑匣子表现得没有内容。
在你的情况下，大输入是黑盒子底部的20px，这是你告诉它的。
你需要设计黑盒子的样式（使其更大，填充一些内容），你会看到两个输入保持20px到底部。
答案 1 :(得分：0)
您需要为div#graph-top-bar
#graph-top-bar {
height: 170px; /* your height */
位置absolute元素不会占用空间。
答案 2 :(得分：0)
#graph-top-bar {
background: #474747;
background: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #474747 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#474747), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #474747 0%,#000000 100%);
background: -o-linear-gradient(top, #474747 0%,#000000 100%);
background: -ms-linear-gradient(top, #474747 0%,#000000 100%);
background: linear-gradient(to bottom, #474747 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#000000',GradientType=0 );
padding: 40px;
}
#graph-top-bar .brand {
width: 48%;
float: left;
}
.hidden-sm {
}
#graph-top-bar h1 {
font-style: italic;
font-size: 150%;
word-wrap: break-word;
}
#graph-top-bar h4 {
font-weight: normal;
font-size: 80%;
margin-top: -5px;
}
#graph-top-bar select {
margin: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #ffffff;
background: url( data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #959595 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#959595));
background: -webkit-linear-gradient(top, #ffffff 0%,#959595 100%);
background: -o-linear-gradient(top, #ffffff 0%,#959595 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#959595 100%);
background: linear-gradient(to bottom, #ffffff 0%,#959595 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#959595',GradientType=0 );
border: 1px solid #000;
font-size: 80%;
padding: 6px;
font-weight: bold;
}
#graph-top-bar .krylon {
width: 48%;
text-align: right;
float: right;
}
select {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: inset 0 0 7px #8c8c8c;
-webkit-box-shadow: inset 0 0 7px #8c8c8c;
box-shadow: inset 0 0 7px #8c8c8c;
border: 1px solid #b3b3b3;
background: #fff;
color: #3b3b3b;
display: inline-block;
height: 35px;
text-indent: 15px;
line-height: 29px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
答案 3 :(得分：-3)
你应该在＃graph-top-bar上设置高度;
#graph-top-bar {
height: 10px;
}