Master-X
Регистрация
|
Вход
Форум
|
Новости
|
Статьи
Главная
»
Форум
»
Дизайн
»
Тема:
Div вёрстка width динамческое изменение ширины блока
Новая тема
Ответить
цитата
23/02/12 в 13:47
zombi
Есть два div блока. В первом загружаются изображения и его ширина не фиксированная, а зависит от ширины изображений, расширения монитора и т.п. А во втором должен быть текст.
Как сделать, чтобы ширина второго блока была равна ширине первого блока? Точнее чтобы ширина текста подстраивалась под ширину блока с картинками.
Может как-то можно вложить блок в блок?
Если есть решение на Javascript, то тоже интересно, хотя хотелось бы что-то попроще.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
text-align: center;
margin: 0px;
padding:0px;
}
.double_cell {
margin: 0;
padding: 0;
text-align: center;
display: inline-block;
}
.cell {
margin: 0;
padding: 10px;
text-align: center;
display: inline-block;
}
.text {
margin: 0;
padding: 10px;
text-align: justify;
}
</style>
</head>
<body>
<div>
<div class="double_cell">
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
</div>
<div class="double_cell">
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
</div>
</div>
<div class="text">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</body>
</html>
цитата
23/02/12 в 15:15
idk2045
table с двумя колонками по 50% width?
и положить ее в <div style="width:auto">
просто предположение
цитата
23/02/12 в 16:40
zombi
Во-первых, хотелось бы не использовать таблицы для дизайна - какой смысл тогда в дивной вёрстке?
Во-вторых, текст идёт под картинкой. Даже в таблице ширина верхней и нижней ячеек подстраивалась бы по ширине наиболее широкой ячейки, а ею будет как раз ячейка с текстом, а надо, чтобы ширина ячейки с текстом подстраивалась по ширине ячейки с картинкой.
цитата
23/02/12 в 20:09
idk2045
глянул код, я ваще не то имел в виду, думал тебе надо горизонтально это делать. а так таблицы тут не причем конечно.
на яваскрипте вроде несложно, а чистым цссом имхо не сделаешь.
див с текстом я сперва скрытым вывожу а потом показываю чтоб не было галимых скачков, но может на реальном сайте это лучше будет убрать.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
text-align: center;
margin: 0px;
padding:0px;
}
.double_cell {
margin: 0;
padding: 0;
text-align: center;
display: inline-block;
}
.cell {
margin: 0;
padding: 10px;
text-align: center;
display: inline-block;
}
.text {
margin: 0;
padding: 10px;
text-align: justify;
}
.centered{
margin-left: auto;
margin-right: auto;
display: table;
}
</style>
</head>
<body
onload="document.getElementById('text_div').style.width=document.getElementById('image_div').offsetWidth+'px'; document.getElementById('text_div').style.display='block'"
>
<div
id="image_div" class="centered"
>
<div class="double_cell">
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
</div>
<div class="double_cell">
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
</div>
</div>
<div
id="text_div" class="text centered" style="display:none"
>
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</body>
</html>
цитата
23/02/12 в 20:50
Evilin
del
цитата
23/02/12 в 20:53
zombi
Спасибо, буду изучать код.
grozny писал:
див с текстом я сперва скрытым вывожу
А поисковики нормально на это реагируют?
И ещё всё-таки при ресайзе окна браузера текст остаётся первоначальной ширины. Это не критично, но всё-таки возможно ли что-то с этим сделать? Использовать onresize например.
цитата
23/02/12 в 21:06
idk2045
да если эта страничка нужна для поисковиков то лучше такого не делать.
чтоб меньше скакала ширина можно потом для text_div прописать какую-нибудь более подходящую дефолтную ширину типа width:300px.
onresize можно добавить, да.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
text-align: center;
margin: 0px;
padding:0px;
}
.double_cell {
margin: 0;
padding: 0;
text-align: center;
display: inline-block;
}
.cell {
margin: 0;
padding: 10px;
text-align: center;
display: inline-block;
}
.text {
margin: 0;
padding: 10px;
text-align: justify;
}
.centered{
margin-left: auto;
margin-right: auto;
display: table;
}
</style>
<script>
function normalize_divs()
{
document.getElementById('text_div').style.width=document.getElementById('image_div').offsetWidth+'px';
}
</script>
</head>
<body onload="normalize_divs()" onresize="normalize_divs();">
<div id="image_div" class="centered">
<div class="double_cell">
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
</div>
<div class="double_cell">
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
<div class="cell">
<a href=""><img src="https://www.master-x.com/banners/gifts3.gif"></a>
</div>
</div>
</div>
<div id="text_div" class="text centered">
<p>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>
</div>
</body>
</html>
Новая тема
Ответить
Эта страница в полной версии