размеры изображений могут отличаться, но ниже тексты не должны переполняться, чем ширина изображения для демонстрации
HTML
<img />
<p>some text</p>
неправильно
+----------------------------+
| |
| |
| image |
| |
| |
| |
+----------------------------+
The result should not be this because overflowing the image width
правильно
+----------------------------+
| |
| |
| image |
| |
| |
| |
+----------------------------+
The result should be this
because its not overflowing
the image width
Теперь, если мой образ больше, это должно выглядеть так
+------------------------------------------------------+
| |
| |
| |
| |
| |
| |
| image |
| |
| |
| |
| |
| |
+------------------------------------------------------+
The result should be this because its not overflowing
the image width
Есть идеи? Как мне разметка или стиль?
Используйте css tables
и установите ширину таблицы очень маленькой.
<div>
<img />
<p>some text</p>
</div>
div
{
display: table;
width: 1px;
}
img, p
{
display: table-row;
}
если вы не используете js. в какой-то момент вам понадобится знать размеры изображения, если вы хотите, чтобы он отображал полное соотношение. если вы не возражаете контролировать ширину и высоту с помощью css, вы можете сделать эту скрипку.
#f {
background:url('http://jquery.malsup.com/cycle2/images/beach1.jpg') no-repeat top left;
height:200px;
width:200px;
border:1px solid blue;
vertical-align:text-bottom;
}
#content{
position:relative;
bottom:-100%;
border:1px solid red;
}
<div id="f">
<p id="content">
Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
</p>
</div>
на самом деле не отвечает на ваш вопрос, но должен дать вам представление о том, почему это сложно с помощью css2, я знаю очень мало о css3, возможно, это можно сделать с помощью css3
container
снаружи<img>
и<p>
которым должны быть заданыwidth
иwidth
<img>
а<p>
должно быть100%