Как расположить элементы на одном уровне, используя div, чтобы страница не развалилась? - PullRequest
Новая
       1

Как расположить элементы на одном уровне, используя div, чтобы страница не развалилась?

0 голосов
/ 30 января 2011

Я поместил 3 элемента рядом, используя div. Проблема в том, что один из них растет динамически в зависимости от пользовательского ввода. Если он становится слишком большим, все элементы попадают в неправильные места, и вся страница искажается. Как я могу решить эту проблему без использования таблиц.

Ответы [ 2 ]

2 голосов
/ 30 января 2011

Вы можете использовать свойство width css. Перемещая элементы рядом, содержимое каждого элемента будет иметь width, которое вы установите для каждого.

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;}

Демо: http://jsfiddle.net/K9K6B/

0 голосов
/ 30 января 2011

Вы можете использовать свойство display, чтобы элементы действовали как элементы таблицы: 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...