Question

我有一个大小为最大宽度为720px的父div，一个子图像和一个子div，其大小均为max-width为100％且display属性设置为block。 div内容为一个非常长的字符串，img是一个非常宽的图像。

当视口小于720px时，图像会正确调整大小。然而，div获取字符串的宽度并忽略任何溢出，直到它达到720px。

任何人都可以解释为什么img标签被调整大小到视口，而div不是吗？

.container {
  max-width: 720px;
  display: inline-block;
}
.container img,
.container .content {
  max-width: 100%;
  display: block;
  overflow: hidden;
}

<div class="container">
  <img src="https://www.swedavia.com/imagevault/publishedmedia/h1i0wnry5er12gtxsmxu/longchamp400.png">
  <div class="content">.........................................................................................................................................</div>
</div>

Answer 1

任何人都可以解释为什么img标签被调整大小到视口，而 div不是吗？

由于牢不可破字符串，因此很简单。

要解决此问题，请将父display div的.content属性设置为inline，添加word-wrap: break-word以启用换行并提供{{1 } {div} .container width以使其响应：

＆＃13;

100%

＆＃13;

.container {
  max-width: 720px;
  width: 100%; /* responsiveness */
  display: inline-block;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  display: block;
}

/* solution */
.container .content {
  display: inline;
  word-wrap: break-word;
}

＆＃13;

img得到调整大小但div没有

1 个答案: