Question

我正在尝试创建一个项目列表，其中列表中的每个项目基本上包含两列...左列有一些文本，右列有2个按钮，用于是/否。我希望右边的两个按钮与文本垂直对齐。出于审美原因，我想在列表项目上使用最小高度。我终于想通了浮动div必须在绝对div内才能达到100％的高度。现在问题是我在原始相对div中有一个绝对div，它不再扩展以容纳比min-height更长的文本。我已经阅读了这么多篇文章，并尝试了很多不同的高度/相对/绝对/浮动/清除/溢出组合，没有任何方法适用于我的情况。有解决方案吗？

在我的示例http://jsfiddle.net/THBFY/4/中，我需要红色框与蓝色框的高度相同，以便垂直对齐。

<div class="list_container">
  <div class="list_item">
    <div class="item_text">
        My text in this item.  This could be a variable length creating a div ranging from about 75-150px in height.  This is a lot of text to make it longer although I am not really saying anything here.  It is only to make the blue box taller than the red box.
    </div>
    <div class="item_buttons">
      <div class="buttons_inner">
        <div class="button button_yes">Y</div>
        <div class="button button_no">N</div>
      </div>
    </div>
  </div>
</div>

.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }

当我使用position：absolute http://jsfiddle.net/THBFY/5/添加内部div时，问题是高度不再增加以显示所有文本。

<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }

但是，如果我现在将外部div的最小高度从70更改为200 http://jsfiddle.net/THBFY/6/，您可以看到红色框上的100％高度实际上正在工作，所以我的问题是在没有绝对位置的第一种情况，我需要红框拉伸，或者在绝对div的第二种情况下，我需要容器拉伸。

Answer 1

<强> HTML：

<div class="list_container">
  <div class="list_item">
    <div class="item_text">My text in this item.  This could be a variable length creating a div ranging from about 75-150px in height.  This is a lot of text to make it longer although I am not really saying anything here.  It is only to make the blue box taller than the red box.
    </div>
    <div class="item_buttons">
      <div class="buttons_inner">
        <div class="button button_yes">Y</div>
        <div class="button button_no">N</div>
      </div>
    </div>
  </div>
</div>

的 CSS：

.list_container { position: relative; width: 400px; } .list_item { border: #000000 solid 1px; display:table; } .item_text { display:table-cell; width: 340px; background-color: #0066BB } .item_buttons { display:table-cell; width: 50px; background: #FF0000; } .button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; } .button_yes { background-image: url("images/yes.gif"); } .button_no { background-image: url("images/no.gif"); }

fiddle

使浮动div使用min-height的父级100％高度，同时仍然允许父级扩展

1 个答案: