Question

这就是我的代码：http://codepen.io/helloworld/pen/bEMoLa?editors=1100

我希望图像下方的文字不会超出图像的右边框。相反，文本应该换行。

我该怎么做？

<div style="background:orange;">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRmvFCHgvt3ywCj6yAxRKgnrU6VraZAIBtFSaP_maZInJ5GqmU1CQ" />Text below should stop at the image right border and line-break

  <h2>Sie haben Ihre Anfrage erfolgreich storniert!</h2>
<p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

</div>

我不想在代码中的任何位置硬编码图像的宽度。

Answer 1

HTML代码：

<div class="mainDiv">
  <div class="pictureAndTexDiv">
    <div class="cell"> <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" /> <span class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor.</span> </div>
  </div>

上面的CSS：

.mainDiv {
    border: red 1px solid;
}
.pictureAndTexDiv {
    border: blue 1px solid;
    width: 1%;
    display: table;
}
.cell {
    height: auto;
    overflow: hidden;
}

只需将显示更改为表格

Answer 2

将图像和文本一起包装在一个div中并给它一个宽度。你的图像是309px宽，所以使div成为维度。

Answer 3

你需要将图像和文本包装成这样的div：

<div class="wrapper">
   <img src="#"/>
   <p>lorem ipsum dolor sit ammet</p>
</div>

然后给包装器提供与图像相同的宽度，接近这个：

 .wrapper
{
  width: 350px
}

这是一种方法，但您也可以使用像Bootstrap这样的网格框架来完成这项工作

Answer 4

尝试这样做是有效的：

＆＃13;

<html>
<style>
    .wrap {
        display: inline-block;
        position: fixed;
        background:orange;
    }

    .wrap img + div {
        position: absolute;
        margin: auto;
    }
</style>
<div class="wrap" >
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRmvFCHgvt3ywCj6yAxRKgnrU6VraZAIBtFSaP_maZInJ5GqmU1CQ" />
    <div class="wrap" >
        <h2>Sie haben Ihre Anfrage erfolgreich storniert!</h2>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>


</html>

＆＃13;

使文本与兄弟图像一样宽

4 个答案: