3 div в одной строке: левый и правый изменяют свою ширину в зависимости от размера окон, в то время как центрированный фиксирован

#css #layout

#css #макет

Вопрос:

Может быть, это действительно просто, но я не могу этого понять.

Я бы хотел, чтобы центр моих 3 столбцов имел ширину 1280, а два других были изменены в зависимости от размера окон (поэтому, если, например, окно имеет размер 1280 пикселей, я не вижу боковых разделов).

Вот мой код. Где я ошибаюсь?

     <!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<style>

div{display:block;}


#left{
    border:1px solid green;
    float:left;
    width:auto;
    }
#center{
    border:1px solid red;
    width:1280px;
    float:left;
    }
#right{
    border:1px solid purple;
    float:left;
    width:auto;
    }

</style>
</head>

<body>
    <div id="container_center">
        <div id="left">amp;nbsp;</div>
        <div id="center">
        Lorem ipsum
        </div>
        <div id="right">amp;nbsp;</div>
    </div>

</body>
</html>
 

Ответ №1:

Было бы полезно, если бы вы дали нам URL этого, чтобы нам не приходилось загружать его самостоятельно, но я бы начал с добавления a min-width:10px; и a min-height:100px . Возможно, начиная с некоторого lorem ipsum, потому что некоторые браузеры могут игнорировать ваше пространство.