Question

我的代码是：

＆＃13;

.image{
  max-width: 50%;
}
.app{
  display: flex;
}
.description{
  color: red;
  max-width: 705px;
}

＆＃13;

<h1 class="title">My App</h1>
<div class="app">
    <div class="image">image</div>
    <div class="description">some long text</div>
</div> <!-- /.app -->

＆＃13;

当我增加图像div的max-width时，无论如何，图像div都保持相同的宽度。

但是当我增加max-width描述时，它会相应地改变。

此外，当我将max-width更改为width时，它也会更改460px并占用比max-width更多的空间。

为什么会这样？

Answer 1

max-width未设置元素的宽度。

它告诉你的div：这是你可以获得的宽度（从0开始，内容宽度或min-width）

您的div有max-width: 50%（.image）和max-width: 705px（.description）。

如果div中没有内容，则宽度为零。

.app {
  display: flex;
  padding: 5px;
}
.image {
  max-width: 50%;
  border: 1px dashed black;
}
.description {
  color: red;
  max-width: 705px;
  border: 1px dashed green;
}

<h1 class="title">My App</h1>
<div class="app">
  <div class="image"></div>
  <div class="description"></div>
</div>
<!-- /.app -->

如果内容宽度小于max-width，则div将采用内容宽度。

.app {
  display: flex;
  padding: 5px;
  border: 1px solid red;
}
.image {
  max-width: 50%;
  border: 1px dashed black;
}
.description {
  color: red;
  max-width: 705px;
  border: 1px dashed green;
}

<h1 class="title">My App</h1>
<div class="app">
  <div class="image">xxx</div>
  <div class="description">xxxx</div>
</div>
<!-- /.app -->

如果内容超过max-width，那么max-width就会发挥作用。

.app {
  display: flex;
  padding: 5px;
  border: 1px solid red;
}
.image {
  max-width: 10%;
  border: 1px dashed black;
}
.description {
  color: red;
  max-width: 70px;
  border: 1px dashed green;
}

<h1 class="title">My App</h1>
<div class="app">
  <div class="image">image image image image image image image</div>
  <div class="description">some long text some long text some long text some long text some long text</div>
</div>
<!-- /.app -->

max-width不会改变我的div

1 个答案: