Jump to content
  • 0

Форма растягивает блок


nickostyle
 Share

Question

Привет всем участникам!

Возникла проблема при верстке.

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

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

Казалось бы, задача решена. Но в блоке с контентом имеется форма, которая раскрывается при нажатии на ссылку. И при разворачивании эта форма растягивает блок с контентом на всю ширину правой колонки сайта, и тем самым растягивает блок с фотографией. привожу скриншоты:

Для наглядности у таблицы border="1".

Изначальный вид:

FORMbug1.jpg

Вид после раскрытия формы

FORMbug2.jpg

Код, в целом, имеет такой вид. Т.е. это общая схема того, что я объяснил, на самом деле там много еще чего, связанного с шаблонизатором и стилями. Стили приводить в теме не вижу смысла, т.к. они на форму никак не влияют, а их действие на блоки я описал, в принципе, выше.

<table>
<tr><td><div>Фотография</div><td></tr>
<tr><td><div>Контент</div></td></tr>
</table>

Как сделать так, чтобы форма не чудила таких вещей? Кстати, для формы стоит width: 95%;

Edited by nickostyle
Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
может, стоит верстать без таблицы?

<div style="max-width:400px;">
<div style="width:100%;">Фотография</div>
<div style="width:100%; overflow:hidden;">
Контент
<form style="width:100%">
<input />
...
</form>
</div>
<div>

Эффект тот же, что при моей верстке.

Проблему решил тем, что оформил форму в див, для которого указал ширину в 200 пикселей.

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