How to make a div extend as far down as its container allows?
Hello SO I was wondering if you could help me out real quick开发者_如何学Python.
Currently on my document this is happening:
http://i.stack.imgur.com/tCkDk.png
However, instead I want this to happen:
http://i.stack.imgur.com/CBCWZ.png
I tried looking in to making the red div's height to the same as its parent but I couldn't figure out how to do that. Any ideas?
float:left you image, then use some margin-left for your text.
You can see a demo there
use float: left and float: right on the two divs :-)
A way to do it without floats is to use display: inline-block. The following will work in IE7+ too! (apply this style to both elements):
selector
{
display: inline-block; // For real browsers
zoom: 1; // For useless, maddeningly crap browsers
*display: inline; // For useless, maddeningly crap browsers
}
Here is a link to what I'm on about. The only minor issue is that you have to specify a width on your text element. It's better than floats though - it keeps the elements in-flow, meaning layout it easier.
How about playing with the Div's bottom margin (margin-bottom)?
there are a few ways, depending on how you have drawn the box. you could use a few pixels of padding, or alternatively have a container div, floated left, with a height of 100% and within that the div/image of the box, floated left. , or as suggested above, float the div on the left to the left, and the text on the right, to the right.
Forgive the long-ish sample:
<html>
<head>
<title>Div Test</title>
</head>
<style type="text/css">
#wrap {
width: 200px;
}
#redbox {
height: 45px;
width: 45px;
background-color: Red;
border: 5px solid black;
margin-right: 10px;
display: inline-block;
float: left;
}
#textbox {
font-weight: bold;
font-size: 20px;
display: inline-block;
}
</style>
<body>
<div id="wrap">
<div id="redbox"></div>
<div id="textbox">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论