Align divs side by side with CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-27 05:44 出处：网络

I want to position my three middle div elements side byside the middle div width is maximum where the other two are fixed sizes

相关专题：css

I want to position my three middle div elements side byside the middle div width is maximum where the other two are fixed sizes

<div>
    <div style="width:50px; height; 50px;">Image</div>
    &l开发者_StackOverflow社区t;div>Some Text</div>
    <div style="width:20px; height; 50px;">Image</div>
</div>

I have a feeling you didn't try googling this but, I feel nice

Sorry here is a jsfiddle working http://jsfiddle.net/austinbv/YbCmH/

<div>
    <div id="first" >Image</div>
    <div id="second">Some Text</div>
    <div id="third" >Image</div>
</div>

CSS

div > div {
    position: absolute;
    height: 50px;
}
#first {
    background: red;
    left: 0;
    width: 50px;
}
#second {
    background: blue;
    left: 50px;
    right: 50px;
}
#third {
    background: green;
    right: 0px;
    width: 50px;
}

There are several solutions out there

http://matthewjamestaylor.com/blog/perfect-3-column.htm
http://www.alistapart.com/articles/holygrail/
Others, just google for 3 column csss

Use CSS positioning, specifically absolute positioning: position the left and right-most elements absolutely and use margin to reserve space for them.

This assumes that the middle column will always be taller than the others:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Align divs side by side with CSS</title>
    <style type="text/css">
        div { border:1px solid red; } /* just for demo purposes */
    </style>
</head>
<body>
    <div style="position: relative; top: 0px; left: 0px;">
        <div style="position:absolute; left:0px; top:0px; width:50px; height:50px;">Image</div>
        <div style="margin-left:50px;margin-right:20px;">Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br />Some Text <br /></div>
        <div style="position:absolute; top:0px; right:0px; width:20px; height:50px;">Image</div>
    </div>
</body>
</html>

This may work:(but not properly in ie7)

<div style="height:300px;background:#ddd;border:1px solid red;float:left;text-align:center" id="container">
  <div style="height:175px;width:100px;background:#CF9;border:1px solid #C0C;float:right" class="box">Image</div>
  <div style="height:150px;width:auto;background:orange;border:1px solid #404040;float:right" class="box">Here is some text</div>
  <div style="height:300px;width:100px;background:green;border:1px solid yellow;float:left;text-align:center" class="box">Image</div>
</div>

u have to use float left for each of the divs with height and width propeties

This worked for me:

<html>
    <head>
        <style type="text/css">
            div {
                color: white;
                font-size: 14px;
                font-weight: 800;
            }

            div.end {
                width: 50px;
                height: 50px;
            }

            div.left {
                float: left;
                background: red;
            }

            div.right {
                float: right;
                background: blue;
            }

            div.container {
                background: green;
                height: 50px;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="end left">Image</div>
            Some Text
            <div class="end right">Image</div>
        </div>
    </body>
</html>