使文本与兄弟图像一样宽答案

【问题标题】：Make the text as wide as the sibling image使文本与兄弟图像一样宽
【发布时间】：2016-01-28 21:49:09
【问题描述】：

那是我的密码笔：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>

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

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

你需要像这样将图像和文本包装到一个 div 中：

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

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

 .wrapper
{
  width: 350px
}

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

【讨论】：

我使用 bootstrap3 我怎么能用 BS3 做到这一点？
lorem ipsum dolor sit ammet

设置图片 width:100% 填充 col-md- 的全宽，我以 col-md-3 为例，你可以根据你的图片设置这个

【解决方案2】：

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;
}

只需将显示更改为表格

【讨论】：

【解决方案3】：

将图像和文本一起包裹在一个 div 中，并给它一个宽度。你的图片是 309px 宽，所以要设置 div 的尺寸。

【讨论】：

我显然不想硬编码大小。图像发生变化。
那么您应该将其作为要求声明。

【解决方案4】：

尝试这样它正在工作：

<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>

【讨论】：