Jump to content
  • 0

что-то я затупил %)


mav
 Share

Question

господа такой вопрос нежданно возник..

имеем трехколоночную верстку (иллюстративно):

<div style="width: 300px; float: left;">
/* тут какой-то контент, пусть пикселей 300 в высоту */
</div>

<div style="margin-left: 300px;">
<div style="float: right; width: 300px;">
/* тут еще какой-то контент, пусть 400 пикселей в высоту */
</div>

<div style="margin-right: 300px;" /* центральная колонка и о ней собссна и речь */
<img style="float: left;" src="xxx.gif" />
<p>blah blah blah blah blah blah blah blah blah blah .... blah</p>
<div>
<a href="#">blah</a>
</div>
</div>
</div>

текст по высоте меньше чем картинка (особенно на высоких разрешениях) и из-за этого блок со ссылкой оказывается выше чем нужно и зачастую наползает на картику, что не гуд. более того, высоту определить и сделать отступ возможности нет, ибо это тока шаблон.

"clear" в данном случае не работает, поскольку роняет блок на уровень или левой или правой колонки в зависимости от параметра.

а теперь внимание, вопрос: как быть и что делать? %)

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

в таком виде как есть сейчас, данный блок позиционируется только относительно текста, поскольку изображение по сути не имеет высоты, так как у него стоит "float"

Link to comment
Share on other sites

  • 0

судя по предоставленному изображению, видимо, задачу обрисован недостаточно корректно...

блок со ссылкой НА ВСЮ ширину колонки и должен быть ПОД изображением с текстом (или текстом с изображением, как больше нравится)

http://www.aisystems.ru/mav/test.png

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