0

我有一个主 div PricingBar，里面有 3 个子 div。同时保持PricingBar height: auto;子 div 显示在PricingBar

在此处输入图像描述

这里绿色边框是PricingBar

选项 A、选项 B、选项 C是子 div

html代码： 

<div id="PriceBar">
   <div id="OptionA">
     <h2>Option A</h2>
     <table class="optiontable">
        <tr><td class="column1">Setup Fee: </td><td><span>&#36;250.00</span> (includes 10 customized apparel pieces)</td></tr>
         <tr><td class="column1">Monthly Fee:</td><td><span>&#36;25.00</span></td></tr>
     </table>
   </div>
   <div id="OptionB">
     <h2>Option B</h2>
     <table class="optiontable">
        <tr><td class="column1">Setup Fee:</td><td><span>&#36;99.00</span> (includes 10 customized apparel pieces)</td></tr>
        <tr><td class="column1">Monthly Fee:</td><td><span>&#36;40.00</span></td></tr>
      </table>
   </div>
   <div id="OptionC">
     <h2>Option C</h2>
     <table class="optiontable">
          <tr><td class="column1">Setup Fee:</td><td>Refund</td></tr>
          <tr><td class="column1">Monthly Fee:</td><td>Refunded</td></tr>
      </table>
   </div>
</div>

CSS代码：

#PriceBar{
    width: 1004px;
    position: relative;
    height:auto;
    padding:10px;
    border: 2px solid green;
    background:#930;
    float: inherit;

}

#OptionA, #OptionB, #OptionC{
    margin: 10px 20px;
    padding: 5px;
    float: left;
    width: 283px;
    height: auto;
    background-color: #FFF;
    -webkit-border-radius:15px;
    -mox-border-radius:15px;
    border-radius:15px;
}

#OptionA h2, #OptionB h2, #OptionC h2{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #006A8E;
}
table.optiontable tr td{
    padding: 10px 5px;
    color: #B9B196;
}
td.column1{
    width:100px;
    vertical-align: top;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana, Geneva, sans-serif;
    color: #252525 !important;
}
table.optiontable tr td span{
    font-weight: bold;
}
4

6 回答 6

4

由于您的所有div元素都浮动，因此“红条”基本上“忘记”它是它们的容器。只需添加一个overflow:auto;以使其记住。我也倾向于zoom:1为 IE 添加。

于 2012-07-18T07:23:57.713 回答
3

因为子 div 的浮动

添加溢出：隐藏到 PricingBar

#PriceBar{
    width: 1004px;
    position: relative;
    height:auto;
    padding:10px;
    border: 2px solid green;
    background:#930;
    float: inherit;

    overflow:hidden;/*!!!*/

}
于 2012-07-18T07:22:21.280 回答
1

将 overflow:hidden 添加到您的#PriceBar 样式应该可以解决问题。

于 2012-07-18T07:25:28.460 回答
1

演示 http://jsfiddle.net/8aduV/1/

于 2012-07-18T07:25:59.280 回答
0

你不需要 height:auto;

只需将其设为表格，因为它将是跨浏览器：

<table id="PriceBar">
    <tr>
        <td id="OptionA">
            <h2>Option A</h2>
            <table class="optiontable">
                <tr><td class="column1">Setup Fee: </td><td><span>&#36;250.00</span> (includes 10 customized apparel pieces)</td></tr>
                <tr><td class="column1">Monthly Fee:</td><td><span>&#36;25.00</span></td></tr>
            </table>
        </td>
        <td id="OptionB">
            <h2>Option B</h2>
            <table class="optiontable">
                <tr><td class="column1">Setup Fee:</td><td><span>&#36;99.00</span> (includes 10 customized apparel pieces)</td></tr>
                <tr><td class="column1">Monthly Fee:</td><td><span>&#36;40.00</span></td></tr>
            </table>
        </td>
        <td id="OptionC">
            <h2>Option C</h2>
            <table class="optiontable">
                <tr><td class="column1">Setup Fee:</td><td>Refund</td></tr>
                <tr><td class="column1">Monthly Fee:</td><td>Refunded</td></tr>
            </table>
        </td>
    </tr>
</table>
​
于 2012-07-18T07:30:49.427 回答
-1

这是正常的，如果你在 auto 中有一个高度；在你的两个第一个块中，你的块在两行中，在第三个中，文本它只是在一个块中，尝试在每个“tr”中使用“min-height”

tr{
    min-height:40px;
}

或者，其他解决方案是为所有代码创建一个全局表。你的三列是链接，你没有这个问题：p

对于调试，使用Firebug更容易测试您的 html 代码和 CSS。

希望能帮到你;-P

于 2012-07-18T07:36:40.850 回答