Question

我正在尝试创建一个包含图像下的图像和描述的框。目前，我的图像溢出了框。我也希望能够创建一排这些盒子。我该如何解决？谢谢！

下面的HTML：

    <div class="img">
      <a href="#"><img class="image" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></a>
      <br>Blah blah blah blah blah
      <p>sdfsdfsdfsdfssdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf</p>
      </div>

下面的CSS：

 div.img {
     margin: 5px;
     float: left;
     width: 180px;
 }

 img.image {
   max-width:400px;

 }

Answer 1

要使您的演示工作，您需要将图像设置为max-width: 100%，以便它不会溢出父级，并在文本中放置空格，或使用word-break: break-all所以文本不会溢出父母。

＆＃13;

div.img {
  margin: 5px;
  float: left;
  width: 180px;
  word-break: break-all;
}
img.image {
  max-width: 100%;
}

＆＃13;

<div class="img">
  <a href="#"><img class="image" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></a>
  <br>Blah blah blah blah blah
  <p>sdfsdfsdfsdfssdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf</p>
</div>

＆＃13;

Answer 2

你应该尝试：

img.image {
   width:100%
 }

Answer 3

.img {
  margin: 5px;
  float: left;
  width: 180px;
}

img {
  width: 100%;
  height: auto;
}

<div class="img">
  <a href="#"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></a>
  <p>sdfsd fsdfsdfss dfsdfsdfs dfsdfsdfs dfsdfsdf sdfsdf</p>
</div>

Answer 4

将DIV设为内联块并将width: 100%;添加到图像中（不仅仅是max-width）：

https://jsfiddle.net/yu3sqgp8/1/

如何将图像放入带描述的div框？

4 个答案: