X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> помогите с div-ами
octavian_hb
octavian_hb
Topic Starter сообщение 20.6.2010, 17:24; Ответить: octavian_hb
Сообщение #1


Суть проблемы следующая:
есть задача сделать div-ами чтобы было так:
[IMG]http://391578.ru/12345.jpg[/IMG]

Бьюс над следующим кодом:
<div class="mainblock">
<div class="mainbox">
<div class="datebox">правый блок</div>
<div class="contentbox"><h1>Заголовок Заголовок Заголовок Заголовок</h1></div>
<div class="contentbox">
<img class="imgbox" src="img/dr/astman_a_m.jpg" width="100" height="125" alt="" /><h2>заголовок</h2>
<p>описание описание описание описание описание описание описание описание описание описание описание </p>
</div>
<div class="contentbox">
<img class="imgbox" src="img/image.jpg" width="100" height="125" alt="" /><h2>заголовок</h2>
<p>описание описание описание описание описание описание описание описание описание описание описание </p>
</div>
</div>
</div>


CSS:
.mainblock {
position: relative;
width: 100%;
}
.imgbox {
float: left;
margin-right: 10px;
display: table;
}
.mainbox {
position: absolute;
border: 1px solid red;
display: table;
width: 100%;
}
.datebox {
top: 0;
right: 0;
width: 100px;
height: 100px;
border: 1px solid green;
float: right;
position: relative;
}
.contentbox {
position: relative;
border: 1px solid blue;
}


Люди добрые как сделать так чтобы блок contentbox принимал высоту картинки? Получается то что див выравнивается по высоте в случае наполнения его контентом, а картинка вылазиет за границы дива, более того, когда несколько contentbox следуют друг за другом то картинки выстраиваются лесенкой...
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Grumm
Grumm
сообщение 20.6.2010, 23:05; Ответить: Grumm
Сообщение #2


А не проще в данном случае использовать таблицу?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 20.6.2010, 23:22; Ответить: alexdrob
Сообщение #3


(octavian_hb @ 20.6.2010, 20:24) *
выстраиваются лесенкой


ну для этого есть clear:both; задайте его contentbox

(octavian_hb @ 20.6.2010, 20:24) *
а картинка вылазиет за границы дива

не совсем понял что у вас происходит, но вот например кртинка имеет свойство
float: left;
чтобы она была в родительском блоке, мало задать
position: relative;
нужно ещё и
float: left;
задать ну а чтобы блок не потерял размер ему нужно указать его явно
то есть что то типа получится

.contentbox {
  float:left;
  clear:both;
  width:100%;
  position: relative;
  border: 1px solid blue;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
alexdrob
alexdrob
сообщение 20.6.2010, 23:29; Ответить: alexdrob
Сообщение #4


да и ещё ) обязательно указывайте DOCTYPE превой строкой, хотя бы просто
<!DOCTYPE html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 20.6.2010, 23:31; Ответить: Letmetouchyou
Сообщение #5


<style>
div.main {
border: 1px solid #ff0000;
background: #ffcccc
}

p {
text-align: center
}

div.left {
margin:3px;
background: #dbdbdb;
float: left;
width: 75px;
height: 75px;
}

div.right {
margin:3px;
background: #dbdbdb;
float: right;
width: 75px;
height: 75px;
}

div.mid {
padding:3px;
min-height:75px
}
</style>
<div class='main'>
<div class='left'>
left
</div>
<div class='right'>
right
</div>
<div class='mid'>
<p>
Title
</p>
Middle
</div>
</div>


не проверял, но должно работать)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
10 muratastana 1545 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) Помогите рещить проблему с монитором.
Почему низкое разрешение при подключении монитора через displayport?
0 Levels 1695 11.12.2020, 0:48
автор: Levels
Открытая тема (нет новых ответов) Помогите кто нибудь получить партнерку Росбанк!
7 heisenberg_mw 2315 7.8.2020, 9:28
автор: heisenberg_mw
Открытая тема (нет новых ответов) Помогите найти тему пожалуйста
7 virtas 12405 24.7.2020, 17:02
автор: -JamesSmips-


 



RSS Текстовая версия Сейчас: 29.3.2024, 6:39
Дизайн