How to position elements on the same level using divs so that the page does not fall apart?_问答_开发者

How to position elements on the same level using divs so that the page does not fall apart?

开发者 https://www.devze.com 2023-02-08 01:19 出处：网络

相关专题：css css-float

I have placed 3 elements side by side using div. The problem is that one of them grows dynamically depending on the user input. If it grows too big all the elements fall into wrong places and the whole page gets disfigured. Ho开发者_如何学Gow I fix this problem without using tables.

You can use the width css property. Floating the elements side by side, then the content of each element will have the width that you will set for each one.

html

<div class="box" id="first">content</div>
<div class="box" id="second">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>
<div class="box" id="third">content content content content content content content content content content content content content content content content content content </div>

css

.box {float:left; width:200px;}
#first {background:red;}
#second {background:blue;}
#third {background:green;}

Demo: http://jsfiddle.net/K9K6B/

You can use the display property to make the elements act as table elements:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .table {
                display: table;
                min-width: 1024px;
                width:auto;
                min-height:400px;
                height:auto
            }
            .row {
                display: table;
                min-width: 100%;
                width:auto;
                height:auto
            }
            .cell {
                display: table-cell;
                width: 340px;
                height:auto
            }
            .lred {background-color:#ffcccc}
            .lgreen{background-color:#ccffcc}
            .lblue {background-color:#ccccff}
        </style>
    </head>
    <body>
        <div class="table">
            <div class="row">
                <div class="cell lred">
                    <p>1</p>
                    <p>1</p>
                    <p>1</p>
                    <p>1</p>
                    <p>1</p>
                    <p>1</p>
                    <p>1</p>

                </div>
                <div class="cell lgreen">
                    <p>2</p>
                </div>
                <div class="cell lblue">
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                    <p>3</p>
                </div>
            </div>
        </div>
    </body>
</html>