| Float position with vetical align on bottom line
|
webstyler
msg:4354135 | 8:50 am on Aug 22, 2011 (gmt 0) |
Hello
I need to made a lot of div with float left, but all text inside must be align vertically on bottom line, as this: [webstyler.it...]
Any suggest ?
Thanks
|
Paul_o_b
msg:4354170 | 11:25 am on Aug 22, 2011 (gmt 0) |
Hi,
I don't think you can do it automatically using floats. You would need to micromanage each element and adjust with padding until it lines up.
Using display:table-cell for IE8+ should allow for automatic alignment though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p{margin:0}
.test span {
display:table-cell;
background:#ccc;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
vertical-align:baseline;
padding:3px 4px;
line-height:1.0;
border:1px solid #fff;
}
.a {
font-size:200%;
font-weight:bold
}
.b {font-size:85%}
.c {font-size:100%}
.d {font-size:65%}
</style>
</head>
<body>
<p class="test"><span class="a">My</span><span class="b">For Testing only</span><span class="d">Example</span><span class="c">Test</span></p>
<p class="test"><span class="d">Example</span><span class="a">My</span><span class="b">Testing</span><span class="c">Example</span></p>
</body>
</html>
|
|
|
