How can I create this specific layout using html and css?_问答_开发者

How can I create this specific layout using html and css?

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

How can I make this in HTML/CSS (no javascript!!): Everything 开发者_高级运维should be inside a div, which has fluid width.

How can I make this in HTML/CSS (no javascript!!):

How can I create this specific layout using html and css?

Everything 开发者_高级运维should be inside a div, which has fluid width.

It only has to work in Google Chrome.

I just can't figure this out.

@Bmaster

Hey man, I fiddled around and finally found what I think is what you're asking for... take a look:

http://jsfiddle.net/2pXpN/

How can I create this specific layout using html and css?

The hardest part for me was getting the text to dictate the height of the whole thing--but after I stopped trying to use floats, it all worked out ;)

Try adding some more text, etc.. it should work!

Edit: I wasn't sure if you wanted a 'header' at the top, but I put one on here: http://jsfiddle.net/bHhd8/. *Notice that it's outside the wrapper, otherwise the side columns become too tall!

There's something about it I don't like, but it does work.

<!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">
<head>
    <title>Test</title>
    <style type="text/css">
        body
        {
            padding: 0;
            margin: 0;
        }

        #content
        {
            background-color: #cccccc;
            min-height: 100%;
        }

        #header
        {
            height: 40px;
            background-color: #666666;
        }

        #left
        {
            float: left;
            width: 33%;
        }

        #mid
        {
            margin: 0 33%;
            background-color: #6666ff;
        }

        #right
        {
            float: right;
            width: 33%;
            margin-top: -50px;
        }

        .fixedHeight
        {
            height: 50px;
            background-color: #ffff33;
        }

        #left .fixedHeight
        {
            margin-right: 10px;
            margin-bottom: 10px;
        }

        #right .fixedHeight
        {
            margin-left: 10px;
        }

        .clear
        {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">
        header
    </div>
    <div id="content">
        <div id="left">
            <div class="fixedHeight">
                fixed
            </div>
            <div class="fixedHeight">
                fixed
            </div>
        </div>
        <div id="mid">
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text
        </div>
        <div class="clear"></div>
        <div id="right">
            <div class="fixedHeight">
                fixed
            </div>
        </div>
    </div>
</body>
</html>

Since the height of the ornage boxes is fixed, you can position them absolutely. For the bottom-right one. This should be self-explanitory:

.orange-box {
  width:33%;
  height:100px;
  position:absolute;
}

.orange-box.top-left-1 { top:0; left:0; }
.orange-box.top-left-2 { top:100px; left:0; }
.orange-box.bottom-right { bottom:0; right:0; }

The blue area should be another div with

width:33%;
margin:0 auto

After reviewing the other answers which seemed to not quite get what you wanted, I've decided to throw in my own jsfiddle answer.

More important than solving your problem is helping you to understand the solution, which requires understanding floats, clears, and positioning.

The columns are cleared by the #footer, which currently contains nothing, but helps to extend the page size beyond the wrapper.

The #page element is relatively positioned, so that absolutely positioned children will be positioned relative to it, rather than the body.

Here's a good start: http://matthewjamestaylor.com/blog/perfect-3-column.htm

Your divs requiring a fixed height shouldn't require much work after that.

Try using css grids, like the liquid extension for blueprint. This will fix all the width problems. Then for the bottom div you'll just need some absolute positioning settings and it should be ok.