Jump to content
  • 0

Div под divом


7ion
 Share

Question

Здравствуйте.

Есть небольшая задача, которую я со своим уровнем знаний не могу решить.

Необходимо там, где на скрине отмечено желтым написать 14 Кб, 456х235.

Я не знаю, как туда вставить еще один div, чтобы он шел строго параллельно с картинкой и равнением посередине.

3123_site.PNG

Вот код:

<div class="reply"><a id="33206"></a><div class="thumb" style="background-image: url('/m2-ch/fa/thumb/1301815846059s.jpg');"></div>03 Апр, 11:30 <span class="reflink">#33206</span><br />Текст сообщения</div>

.reply { 
background : #ddd;
border : 1px solid #ccc;
margin: 5px;
padding: 5px;
overflow: hidden;
}
.thumb {
float : left;
border : 1px solid #bbb;
margin : 15px 15px 15px 10px;
width: 64px;
height: 64px;
background-position: 50% 50%;
background-repeat: no-repeat;
}

Может, это надо как-либо переверстать?

Заранее спасибо за помощь.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Если картинки по высоте будут одинакового размера, то может так?


<div class="reply">
<a id="33206"></a>
<div class="thumb" style="background-image: url('/m2-ch/fa/thumb/1301815846059s.jpg');">
<div style="padding-top:70px; text-align: center;">14 Кб, 456х235</div>
</div>
03 Апр, 11:30 <span class="reflink">#33206</span><br />Текст сообщения
</div>

добавил только

<div style="padding-top:70px; text-align: center;">14 Кб, 456х235</div>

Есть и другие пути на истину не настаиваю ;)

Edited by ShumNo
Link to comment
Share on other sites

  • 0

О, отлично, спасибо большое! Это почти то, что надо.

<div style="padding-top:65px; text-align: center; font-size: 0.8em; color: gray;">1467 Кб, 4567х2735</div>

Нужно, чтобы еще текст сообщения обтекал этот div и чтобы он распирал div class="reply" (сообщение может быть коротким или его может не быть вовсе), а то иначе получается так:

5347_site3.PNG

Link to comment
Share on other sites

  • 0

Текст и так обтекает так как текст под картинкой внутри дива с float

А что касается "распирания" так у родительского дива указана жесткая ширина в 64 пикселя

Либо ширину менять либо переверстывать структуру либо сократить запись (убрать лишнее) и шрифт поставить 9px а ширину блока с картинкой немного увеличть до 70-80 пх если требуется

Edited by ShumNo
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy