0

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

我使用了最小/最大宽度，但内容从未达到最大值，而是保持在最小值。

.intro 是包装器。这个包装器的最小宽度应该是 801 像素，并且可以增长到最大 1200 像素。第一个内部 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>
4

1 回答 1

0

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;
            }
于 2013-01-11T04:09:33.767 回答