Скажите, пожалуйста, кто знает
Здравствуйте!
Скажите, пожалуйста, кто знает, что нужно написать в css-коде чтобы при изменении окна браузера - средняя ячейка оставалась фиксированной ширины, а обе ячейки сбоку - изменялись и оставались одинаковыми между собой по ширине (до установленной минимальной ширины). Содержание элементарное: таблица из 1 строки и 3 столбцов. Вообще нужен результат чтобы 3 дива так себя вели. С 3 дивами я перепробовал всё, что знаю, и не добившись результата - решил сделать с помощью таблиц. Нижеследующий код даёт результат, но боковые ячейки разнятся по ширине. Скажите, пожалуйста, кто знает.
вот HTML
вот CSS
Скажите, пожалуйста, кто знает, что нужно написать в 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>
<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;
}
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;
}
Спасибо огромное!) В мозилле и эксплойре проверил, работает! В хроме не работает (работает, но не так). Я как раз и проверял все свои варианты в хроме. Спасибо за Ваш код, доработаю его теперь до хрома)
У меня получился требуемый вам эффект вот с таким кодом:
CSS:
HTML:
Только на счет кроссбраузерности нужно посмотреть.
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;
}
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;
}
Код:
<body>
<div id="wrapper">
<div id="t_row">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</div>
</body>
<div id="wrapper">
<div id="t_row">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</div>
</body>
Пожалуйста
Я посмотрел в Хроме и Safari нормально работает только если в ячейках есть что-нибудь.
Ничего лучше не придумал:
#left:after, #right:after{
content: " ";
}
и нужно добавить min-width: 640px; для центра.
Я посмотрел в Хроме и Safari нормально работает только если в ячейках есть что-нибудь.
Ничего лучше не придумал:
#left:after, #right:after{
content: " ";
}
и нужно добавить min-width: 640px; для центра.