Я разместил 3 элемента бок о бок, используя div. Проблема в том, что один из них динамически растет в зависимости от пользовательского ввода. Если он становится слишком большим, все элементы попадают в неправильные места, и вся страница становится обезображенной. Как я исправить эту проблему, не используя таблицы.Как разместить элементы на одном уровне с помощью div, чтобы страница не развалилась?
Вы можете использовать свойство 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;}
Вы можете использовать свойство изображения, чтобы элементы выступают в качестве элементов таблицы:
<!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>
В зависимости от необходимости вы также можете использовать свойство 'max-width' вместо' width'. Однако обычно определение ширины больше подходит для большинства применений. –