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
不，我不是一個自由職業者。我只是一個已經研究過這個東西的學生。對於你的形象來說，很難匹配兄弟姐妹的身高。這是因爲除非父母有一個設定的高度（百分比在這裏真的令人困惑），否則你不能告訴孩子匹配父母的高度。而且無法告訴兄弟姐妹與另一個兄弟姐妹的高度相匹配。 –