0

图像大小可能会有所不同，但下面的文本不应超出演示的图像宽度

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

任何想法？我应该如何标记或赋予样式？

4

2 回答 2

1

使用css tables设置表格的宽度非常小。

工作小提琴

<div>
  <img />
  <p>some text</p>
</div>

CSS

div
{
    display: table;
    width: 1px;
}
img, p
{
    display: table-row;
}
于 2013-10-02T07:06:29.423 回答
0

除非你使用 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 完成

于 2013-10-02T06:58:19.193 回答