我有一個900像素寬的容器，裏面有2個浮動div。我需要使第2列背景全高並依賴於左側的圖像。第2列中的文本也需要垂直居中，這也是基於圖像高度。CSS 2浮動div的內部容器全高度w /圖片
https://jsfiddle.net/rj5o6n79/1/
<div class="wrapper">
<div class="col span_2_of_3 content">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
</div>
<div class="col span_1_of_3 box2">
This is column 2
</div>
<div style="clear:both;"></div>
</div>
您可以使用jQuery獲得的左div
var leftDivHeight = $('.span_2_of_3').height();
$('.span_1_of_3').css('height',leftDivHeight);
的height那麼你inner div的內容換到另一個div
<div class="col span_1_of_3 box2">
<div class='innerContent'> This is column 2 </div> <!-- added div -->
</div>
再加入這個CSS垂直居中你的內心div
.innerContent{
position: relative;
top: 50%;
transform: translateY(-50%);
}
這是你想要的嗎？
body { margin:0; padding:0; }
.wrapper { border:1px solid green; width:900px; margin:0px auto; }
.content {
width: 100%; /* or whatever is required */
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
}
img {
position: relative; /* allows repositioning */
/*left: 100%; move the whole width of the image to the right */
/* margin-left: -200%; magic! */
float:left;
}
/* COLUMN SETUP */
.col {
\t display: block;
\t float:left;
\t margin:0;
}
.col:first-child { margin-left: 0; }
.box { background-color: #ccc; }
.box2 { background-color: red; }
/* GROUPING */
.group:before,
.group:after {
\t content:"";
\t display:table;
}
.group:after {
\t clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
\t width: 100%;
}
.span_2_of_3 {
\t width: 66.1%;
}
.span_1_of_3 {
\t width: 33.8%;
height: 400px;
}
.content {
position: relative;
top: 50%;
text-align:left;
}<div class="wrapper">
<div class="col span_2_of_3 content">
\t <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
\t </div>
\t <div class="col span_1_of_3 box2">
<div class="content">
\t This is column 2
</div>
\t </div>
<div style="clear:both;"></div>
</div>OP要這樣做：*「我需要使第2列背景充滿高度並依賴於圖像左側「*，因此第2列的高度必須是動態的。 –
感謝您的回覆。我想遠離設置班級.span_1_of_3下的高度，因爲我需要有不同高度的多個感言。 https://jsfiddle.net/71dsfrk5/5/ – tebrown
我中有你的問題結帳這個demo的解決方案，我認爲這是爲你工作。下面是代碼：
body { margin:0; padding:0; }
.wrapper {
border: 1px solid green;
width: 900px;
margin: 0px auto;
/* background: #f00; */
display: table;
table-layout: fixed;}
.content {
width: 100%; /* or whatever is required */
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
}
img {
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
}
/* COLUMN SETUP */
.col {
display: table-cell;
vertical-align: middle;
}
.col:first-child { margin-left: 0; }
.box { background-color: #ccc; }
.box2 { background-color: red; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 33.8%;
}
td{ background:#000; color:#fff;}<div class="wrapper">
<div class="col span_2_of_3 content">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
</div>
<div class="col span_1_of_3 box2">
This is column 2
</div>
<div style="clear:both;"></div>
</div>https://jsfiddle.net/Navtosh/pknpsh7u/ –
我想，我都或多或少發現你在找什麼。雖然第二列不是全高，但是它是垂直居中的，並且與它需要的一樣大。
.wrapper {
width: 900px;
border: 1px solid #000000;
display: inline-block;
}
.col img{
display: block;
}
.content {
vertical-align: middle;
display: inline-block;
}
.box2 {
display: inline-block;
vertical-align: middle;
}<div class="wrapper">
<div class="col span_2_of_3 content">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"/>
</div>
<div class="col span_1_of_3 box2">
This is column 2
</div>
<div style="clear:both;"></div>
</div>
感謝您的答覆。它似乎不適用於多個推薦。這是我的jsfiddle ... https://jsfiddle.net/71dsfrk5/5/ – tebrown
@ user1628845，像這樣？ https://jsfiddle.net/wytndhyx/1/。但兩個div之間有一個很大的空間..我認爲這很容易，如果你使用'display：table'作爲'div' –
是的爲什麼白色空間出現？使用顯示錶是否意味着取消進展？ – tebrown