С нами с 04.12.02
Сообщения: 267
Рейтинг: 457
|
 Добавлено: 23/02/12 в 13:47 |
Есть два 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>
|
|
|
|
|
| |
С нами с 27.09.03
Сообщения: 5454
Рейтинг: 2506
|
| Добавлено: 23/02/12 в 15:15 |
table с двумя колонками по 50% width?
и положить ее в <div style="width:auto">
просто предположение 
|
|
|
|
| |
С нами с 04.12.02
Сообщения: 267
Рейтинг: 457
|
| Добавлено: 23/02/12 в 16:40 |
Во-первых, хотелось бы не использовать таблицы для дизайна - какой смысл тогда в дивной вёрстке?
Во-вторых, текст идёт под картинкой. Даже в таблице ширина верхней и нижней ячеек подстраивалась бы по ширине наиболее широкой ячейки, а ею будет как раз ячейка с текстом, а надо, чтобы ширина ячейки с текстом подстраивалась по ширине ячейки с картинкой.
|
|
|
|
| |
С нами с 27.09.03
Сообщения: 5454
Рейтинг: 2506
|
| Добавлено: 23/02/12 в 20:09 |
глянул код, я ваще не то имел в виду, думал тебе надо горизонтально это делать. а так таблицы тут не причем конечно.
на яваскрипте вроде несложно, а чистым цссом имхо не сделаешь.
див с текстом я сперва скрытым вывожу а потом показываю чтоб не было галимых скачков, но может на реальном сайте это лучше будет убрать.
| Код: [развернуть] | <!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> |
|
|
|
|
| |
Web Дизайн Сервис
С нами с 08.06.04
Сообщения: 21623
Рейтинг: 2246
|
| Добавлено: 23/02/12 в 20:50 |
del
|
|
|
|
| |
С нами с 04.12.02
Сообщения: 267
Рейтинг: 457
|
| Добавлено: 23/02/12 в 20:53 |
Спасибо, буду изучать код.
| grozny писал: | | див с текстом я сперва скрытым вывожу |
А поисковики нормально на это реагируют?
И ещё всё-таки при ресайзе окна браузера текст остаётся первоначальной ширины. Это не критично, но всё-таки возможно ли что-то с этим сделать? Использовать onresize например.
|
|
|
|
| |
С нами с 27.09.03
Сообщения: 5454
Рейтинг: 2506
|
| Добавлено: 23/02/12 в 21:06 |
да если эта страничка нужна для поисковиков то лучше такого не делать.
чтоб меньше скакала ширина можно потом для 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> |
|
|
|
|
| |
Текстовая реклама в форме ответа
Заголовок и до четырех строчек текста
Длина текста до 350 символов
Купить рекламу в этом месте! |
