1
我有一个简单的问题，CSS破坏我的周末的大师。 基本上我有一个div，左边是图片，右边是一些文字。 我需要盒子的高度与内容文本相同，例如最后一行下面的图片在盒子外面，而我需要盒子的高度与内容一样。Div高度100％的内容
我不能使用固定高度，因为文本可以在框内改变，我只需要一个已经定义的最小高度。
有些古茹能帮助我吗？
<a href="#" class="myClass">
<div class="postImageUrl" style="overflow:hidden; z-index: 10; max-width: 100%;">
<div class="imgUrl" style="background-image:url(http://cdn8.openculture.com/wp-content/uploads/2015/03/17231820/Lorem-Ipsum.jpg);">
</div>
</div>
<div class="centered-text-area clearfix">
<div class="centered-text">
<div class="myClass-content">
<div class="ctaText" style="float:left;">
UpNeXt
</div>
<div style="clear:both;"></div>
<div class="postTitle" style="float:left;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat
</div>
</div>
</div>
</div>
</a>
这是<风格>
.myClass
, .myClass .postImageUrl
, .myClass .imgUrl
, .myClass .centered-text-area {
min-height: 100px;
position: relative;
}
.myClass
, .myClass:hover
, .myClass:visited
, .myClass:active {
border:0!important;
}
.myClass {
display: block;
transition: background-color 250ms;
webkit-transition: background-color 250ms;
width: 100%;
opacity: 1;
transition: opacity 250ms;
webkit-transition: opacity 250ms;
background-color: #eaeaea;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);
}
.myClass:active
, .myClass:hover {
opacity: 1;
transition: opacity 250ms;
webkit-transition: opacity 250ms;
background-color: #FFFFFF;
}
.myClass .postImageUrl
, .myClass .imgUrl {
background-position: center;
background-size: cover;
float: left;
margin: 0;
padding: 0;
}
.myClass .postImageUrl {
width: 30%;
}
.myClass .imgUrl {
width: 100%;
}
.myClass .centered-text-area {
float: right;
width: 70%;
}
.myClass .centered-text {
display: table;
min-height: 100px;
left: 0;
position: absolute;
top: 0;
}
.myClass .myClass-content {
display: table-cell;
margin: 0;
padding: 0 74px 0 18px;
position: relative;
vertical-align: middle;
width: 100%;
}
.myClass .ctaText {
border-bottom: 0 solid #fff;
color: #34495E;
font-size: 13px;
font-weight: bold;
letter-spacing: .125em;
margin: 0;
padding: 0;
text-decoration: underline;
}
.myClass .postTitle {
color: #000000;
font-size: 18px;
font-weight: 600;
margin: 0;
padding: 0;
}
.myClass .ctaButton {
background-color: #FFFFFF;
margin-left: 10px;
position: absolute;
right: 0;
top: 0;
}
.myClass:hover .imgUrl {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.myClass .imgUrl {
-webkit-transition: -webkit-transform 0.4s ease-in-out;
-moz-transition: -moz-transform 0.4s ease-in-out;
-o-transition: -o-transform 0.4s ease-in-out;
-ms-transition: -ms-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
您可以在这里找到问题http://jsfiddle.net/L26s1vc5/
这是我现在看到 
虽然这是我所期望有： 
最小高度是100px。 我已经与高度测试：100％，溢出-Y：自动，高度：汽车没有成功:(
感谢您的帮助，亚历克斯
天啊！非常感谢！现在效果很好，但是还有一种方法可以调整图像的大小？ – ale500
DSMann8你是一名自由职业者吗？如果是，我可以收到你的电子邮件吗可能是因为我需要你在未来项目中的帮助，而你的回复非常详细。我解决了其他5个盒子里的类似问题，谢谢你的解释:) – ale500
不，我不是一个自由职业者。我只是一个已经研究过这个东西的学生。对于你的形象来说，很难匹配兄弟姐妹的身高。这是因为除非父母有一个设定的高度（百分比在这里真的令人困惑），否则你不能告诉孩子匹配父母的高度。而且无法告诉兄弟姐妹与另一个兄弟姐妹的高度相匹配。 –