Question

我有一个三列网站，它将显示所有三列或只显示一列。如果它只显示一列，我下面的例子就是它将显示的列。此intro包装器是中心列，如果此包装器左侧和右侧的列不存在，则需要增长。具体来说，介绍包装中的第一个div。第二个div中有一个静态图像，不应该改变。

我使用了min / max-width，但内容从未达到最大值，而是保持最小值。

.intro是包装器。这个包装器的最小宽度应该是801px，并且可以增长到最大1200px。第一个内部div（.intro-left）应该至少为531px，最大可以增长到979px。

有人可以看看并告诉我哪里出错了吗？

这是我的代码。

.intro{
  float:left;
  min-height:200px;
  width:801px;
  padding:10px 0;
}

.intro .intro-right{
  display:inline;
  float:left;
  height:200px;
  width:250px;
  background:#ccc;
}

.intro .intro-right img{
  height:190px;
  width:240px;
  margin:5px 0 0 5px;
  border:1px solid #777;
}

.intro .intro-left{
  display:inline;
  float:left;
  width:531px;
  min-height:200px;
  margin-right:20px;
}

<div class="intro">
  <div class="intro-left">
    <h2><a href="#">Test</a></h2>
    <p>test</p>
  </div>

  <div class="intro-right">
    <a href="#"><img alt="" src="1.jpg"></a>
  </div>
</div>

Answer 1

display：table解决了您的问题。这里是CSS，我在测试时做了一些更改，你可能想要删除..比如让左div可以调整大小，这样你就可以看到它在运行中。

div.intro {border:2px dotted red;
                min-height: 200px;
                max-width:1200px;
                min-width:801px;
                padding: 10px 0;
                margin:0 auto;
                display:table;

            }
            .intro-right, .intro-left{display:inline-block;vertical-align:top;}

            .intro-right {
                height: 200px;
                width: 250px;
                background: #ccc;
                outline: 2px solid green;
            }

            .intro-right img {
                height: 190px;
                width: 240px;
                margin: 5px 0 0 5px;
                border: 1px solid #777;
            }

            .intro-left {
                width: 531px;
                height: 200px;
                margin-right: 20px;
                outline: 2px solid blue;
                resize:both;
                overflow:auto;
            }

最小宽度和最大宽度问题。如何让内容随宽度增长

1 个答案: