0

我正在使用 twitter bootstrap 的流体布局编写一个 Web 应用程序。我的代码如下所示。

  <div class="row-fluid">
    <div class="offset1 span10">
        <div class="row-fluid">
            <div class="span4 border-line">
                        <div class="row-fluid">
                            <h4 class="text-center"><a href="/category">name_of_item</a></h4>
                             <a target="_blank" href="link_for_item">
                                <img class="item-size" src="photo.url"/>
                            </a>
                            <p> quick_summary|safe </p>
                        </div>
            </div>
            <div class="span4 border-line">
                        <div class="row-fluid">
                            <h4 class="text-center"><a href="/category">name_of_item</a></h4>
                             <a target="_blank" href="link_for_item">
                                <img class="item-size" src="photo.url"/>
                            </a>
                            <p>quick_summary</p>
                        </div>
            </div>
        </div>
    </div>
</div>

在我的 CSS 中，item-size 如下所示

 .item-size{
      width: 100%;
      height: 50%;
  }

在上面的示例中，除了图像项的高度之外，一切都运行良好。每当我更改为不同的值（例如：60%）时，图像宽度都会发生变化，但高度值对尺寸没有任何影响。我试过用 .item-size 的 div 类包装元素，即使这样也没有任何效果。谁能帮助我如何设置会影响图像高度的高度值？

谢谢

4

1 回答 1

4

您不能按百分比指定高度，除非您为包裹 img 的标签设置了高度。所以你必须以像素为单位设置高度。前任。：

.item-size{
  width: 100%;
  height: 200px;
}

如果你仍然想使用 % 你必须为 a 设置一个高度wrapper div。

于 2013-03-12T23:45:19.040 回答