问题
HTML:
<ul>
<li>
<div class="one">Variable Height Title</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
<div class="four">Fixed height footer</div>
</li>
<li>
<div class="one">Variable Height Title Might be two lines long</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block</div>
<div class="four">Fixed height footer</div>
</li>
<li>
<div class="one">Variable Height Title</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block</div>
<div class="four">Fixed height footer</div>
</li>
</ul>
CSS:
li {
float:left;
width:33%;
}
.one, .three {
background-color:blue;
}
.two, .four {
background-color:green;
}
Please look at this example: http://jsfiddle.net/WffHD/
Is there a way with css only to make the "one" divs equal height (which must be dynamic), and then also make all three columns equal height based on the tallest one as well? Another way of putting it: I want all "one" divs to be equal height, and then all columns should also be equal height by stretching the height of the "three" div. Unfortunately they must stay as li items due to a plugin I am using. I think this could be accomplished fairly easy with javascript but am looking for a css solution if possible. (Caveat, needs to work in IE7) Hope that makes sense and thanks!
回答1:
For IE7?
And Pure CSS?
And All Row 1 (Div "one") Equal Height?
And all Columns Equal Height?
The answer is... Not possible.
回答2:
With great difficulty, or with JavaScript.
This is actually one of the things Flex Box Layout was designed for. So you would have something like this:
#mylist {
display: flex;
flex-flow: row wrap;
}
#mylist>li {
flex: 1 1 100%;
}
And it should give all the elements the same height. See the full Flex Box Layout specification for more options.
Just make sure you have the appropriate vendor prefixes, and you're good to go.
回答3:
What you need isn't possible without some HTML changes.
A possible alternative, with some HTML changes, is to threat the element as a table, the
For example:
<ul>
<li>
<div class="one">Variable Height Title</div>
<div class="one">Variable Height Title that Might be two lines long</div>
<div class="one">Variable Height Title</div>
</li>
<li>
<div class="two">Fixed height middle block</div>
<div class="two">Fixed height middle block</div>
<div class="two">Fixed height middle block</div>
</li>
<li>
<div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
<div class="three">Variable height middle block</div>
<div class="three">Variable height middle block</div>
</li>
<li>
<div class="four">Fixed height footer</div>
<div class="four">Fixed height footer</div>
<div class="four">Fixed height footer</div>
</li>
</ul>
You can take a look here: http://jsfiddle.net/WffHD/25/
回答4:
After edit. In stead of using height, just use vertical-align. (works in css tables)
ul { display: table; } /* Behave as table */
ul > li { display: table-cell; vertical-align: bottom; }
http://jsfiddle.net/wC4RF/4/
回答5:
There is two aspects for attention in this question:
1- equal heights for li's
2- equal heights for the first divs
here is the first step:
there is a simple but trickery pure css solution which is valid and works great in IE6+ (i have tested it before) but needs a little bravory and markup.
first:
ul {
display: block;
overflow: hidden;
}
ul li {
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
it is so simple we are forcing the height of the columns to be extremely tall, and then cutting them off with the hidden overflow, then we force the columns taller with a huge amount of bottom padding, and again we reduce the height of the wrapper back up with an equal amount of negative bottom margin. This gives us just the effect we need.
and for the second part truly the only way i could achieve is only by cutting them off the structure and put them in another structure like the above mentioned and so with a little css magic it seems that they both are only one structure(assuming you dont want to use js for this).
hope it helps.
回答6:
Derive version from William G. Rivera's answer for consistent look through the all browsers including IE7, display: table; free. It is bit cheating and do not makes div's equal heights, but visually this is the same
HTML
<ul>
<li class="one">
<div class="one">Variable Height Title</div>
<div class="one">Variable Height Title that Might be two lines longgggggg</div>
<div class="one">Variable Height Title</div>
<div class="clear"></div>
</li>
<li class="two">
<div class="two">Fixed height middle block</div>
<div class="two">Fixed height middle block</div>
<div class="two">Fixed height middle block</div>
<div class="clear"></div>
</li>
<li class="three">
<div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
<div class="three">Variable height middle block</div>
<div class="three">Variable height middle block</div>
<div class="clear"></div>
</li>
<li class="four">
<div class="four">Fixed height footer</div>
<div class="four">Fixed height footer</div>
<div class="four">Fixed height footer</div>
<div class="clear"></div>
</li>
</ul>
CSS
div {
float: left;
width:33%;
}
.one, .three {
background-color:blue;
}
.two, .four {
background-color:green;
}
.clear {
width: 100%;
clear: both;
float: none;
height: 0;
}
http://jsfiddle.net/YWtSe/2/
回答7:
For a jQuery solution (this could possibly be rewritten to just javascript):
var liPerRow = 3; // The amount of li items on each row
var maxHeight = 0;
for (var i = 0; i < $("ul").children().length; i++) {
if (i % liPerRow == 0) {
// split the list in the li items for just this 'row'
var items = $($("ul").children().splice(i, liPerRow));
// get the highest Height value in this list
maxHeight = Math.max.apply(null, items.map(function () {
return $(this).height();
}).get());
items.height(maxHeight);
}
}
回答8:
To take user1797792's solution a step further, you need to clear out the explicit inline height declaration on elements in order to be able to reuse the function in a responsive layout. In this case, I was resizing li elements inside a parent ul called 'prods'.
function resizeProds(){
for (var i = 0; i < $("#prods").children().length; i++) {
if (i % liPerRow == 0) {
// split the list in the li items for just this 'row'
var items = $($("#prods").children().splice(i, liPerRow));
items.height('');
// get the highest Height value in this list
maxHeight = Math.max.apply(null, items.map(function () {
return $(this).height();
}).get());
items.height(maxHeight);
}
}
}
回答9:
Look at this post by Matthew James Taylor. It's kinda complex to do it with CSS. But that's the only "nice" way. You could also use javascript and calculate the highest column and apply this height to the other two.
You need several Container like this:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
Than you need to reposition each column:
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
来源：https://stackoverflow.com/questions/14248095/how-to-make-3-li-columns-with-variable-height-content-the-same-height