Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Скажите, пожалуйста, кто знает

88K
26 марта 2013 года
Armuwr
2 / / 26.03.2013
Здравствуйте!

Скажите, пожалуйста, кто знает, что нужно написать в css-коде чтобы при изменении окна браузера - средняя ячейка оставалась фиксированной ширины, а обе ячейки сбоку - изменялись и оставались одинаковыми между собой по ширине (до установленной минимальной ширины). Содержание элементарное: таблица из 1 строки и 3 столбцов. Вообще нужен результат чтобы 3 дива так себя вели. С 3 дивами я перепробовал всё, что знаю, и не добившись результата - решил сделать с помощью таблиц. Нижеследующий код даёт результат, но боковые ячейки разнятся по ширине. Скажите, пожалуйста, кто знает.

вот HTML
Код:
<!DOCTYPE HTML>

<head>
      <meta http-equiv="content-type" content="text/html" />
      <meta name="author" content="Eugene" />
      <title>Ухи</title>
      <link href="styTab.css" type="text/css" rel="stylesheet" />
</head>

<body>

    <table>
        <tr>
            <td id="sleva"></td>
            <td id="poseredine"></td>
            <td id="sprava"></td>
        </tr>
    </table>
           
</body>
</html>


вот CSS
Код:
table {
    width: 100%;
    border: 1px solid black;
}

tr {
    text-align: center;
}

#sleva {
    min-width: 192px;
    width: 100%;
    border: 1px solid black;
}

#poseredine {
    display: inline-block;
    width: 640px;
    height: 50px;
    border: 1px solid red;
}

#sprava {
    min-width: 192px;
    width: 100%;
    border: 1px solid black;
}
88K
30 марта 2013 года
Armuwr
2 / / 26.03.2013
Спасибо огромное!) В мозилле и эксплойре проверил, работает! В хроме не работает (работает, но не так). Я как раз и проверял все свои варианты в хроме. Спасибо за Ваш код, доработаю его теперь до хрома)
89K
30 марта 2013 года
KirZ
2 / / 30.03.2013
У меня получился требуемый вам эффект вот с таким кодом:

CSS:
Код:
body {
    padding: 0;
    margin: 0;
}
#wrapper {
    width: 100%;
    min-width: 1024px;
    height: 100px;
    margin: 0 auto;
    outline: 1px solid red;
    display: table;
}
#t_row {
    display: table-row;
}
#center {
    display: table-cell;
    width: 640px;
    height: inherit;
    background: #ddd;
}
#left, #right {
    display: table-cell;
    min-width: 192px;
    height: inherit;
    background: #ccc;
}
HTML:
Код:
<body>


<div id="wrapper">
      <div id="t_row">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
    </div>
</div>

</body>
Только на счет кроссбраузерности нужно посмотреть.
89K
30 марта 2013 года
KirZ
2 / / 30.03.2013
Пожалуйста
Я посмотрел в Хроме и Safari нормально работает только если в ячейках есть что-нибудь.

Ничего лучше не придумал:

#left:after, #right:after{
content: " ";
}

и нужно добавить min-width: 640px; для центра.

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог