How to make a div extend as far down as its container allows?_问答_开发者

How to make a div extend as far down as its container allows?

开发者 https://www.devze.com 2023-02-17 17:53 出处：网络

Hello SO I was wondering if you could help me out real quick开发者_如何学Python. Currently on my document this is happening:

相关专题：css

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>