浮动元素不能撑开父元素的解决方案

公司做的表格还算复杂，感觉对表格用的不是精通，所以想着能用表格实现的还用表格，表格写不了的用div模拟表格，中间遇到了一些坑，特记录！

如有更好的方法，请各位指教！

效果图：

左侧身份证号一栏使用div模拟，右侧详情栏用的表格table，因为一个身份证号可能对应多个号码，就是说右侧的行数不定，要用右侧的表格撑开父元素（整个蓝色区域），再让左侧身份证一栏自适应父元素的高度。

1、起初是把div和table浮动了，结果……撑不开父元素~~~，解决办法是，清楚浮动，万能浮动清除法。class=“clearfix”,一般的reset.css，文件中都有这个清除方法，不再赘述。接着问题来了，万恶的IE不支持。这种方法是行不通了，赶紧再想办法……

2、看看能不能不用浮动解决问题，我把div绝对定位在父元素里，表格margin-left:div’width;还不错高级浏览器都可以实现（除了IE11）。可是IE11都不兼容（div总是比父元素高出一部分！），代码写的也太差劲了，继续解决吧，找了半天，发现刚才加的空元素class=“clearfix”,对就是它，去掉，去掉，去掉ok，实现了！

总结一下，浮动解决不了的问题，就定位吧，完全可以实现效果，浮动带来的问题太多……这种拼接起来的表格，边框的处理也需要技巧，我会将详细代码提出来，供大家参考，有不当的地方，一定洗耳恭听！

 

<body>
        <div class="th">
            <div class="thl">
                身份证号
            </div>
            <div class="thr">
                详情
            </div>
            <span class="clearfix"></span>
        </div>
        <section>
            <div class="data_temp">
                <div class="id_no">
                    <span>18273648935241672</span>
                </div>
                <table border="0"  cellspacing="0" cellpadding="0">
                    <thead>
                        <tr>
                            <th>基本信息</th>
                            <th>生成时间</th>
                            <th>数据源</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                        <tr>
                            <td rowspan="2">
                                <p>123</p>
                                <p>19028397477</p>
                                <p style="font-size: 12px;">dcb6295b498b45d1a5918c00d005ea30</p>
                            </td>
                            <td>
                                数据源
                            </td>
                            <td>
                                <span>信息/</span>
                                <span>操作</span>
                            </td>
                            
                        </tr>
                        <tr>
                            <td>Data</td>
                            <td>Data</td>
                        </tr>
                        
                    </tbody>
                    
                </table>
            </div>
       </section>
</body>

 

            <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .th{
                width: 598px;
                height: 30px;
                border: 1px solid #999;
                text-align: center;
            }
            .thl{
                width: 199px;
                height: 30px;
                border-right: 1px solid #999;
                
            }
            .thr{
                width: 398px;
                height: 30px;
            }
            .thl,.thr{
                float: left;
                
            }
            .data_temp{
                width: 602px;
                background: lightblue;
                position: relative;
            }
            .id_no{
                width: 200px;
                height: 100%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing:border-box ;
                border-left: 1px solid #999;
                border-bottom: 1px solid #999;
                position:absolute;
                top: 0;
                left: 0;
            }
            .id_no span{
                display: inline-block;
                width: 200px;
                height: 30px;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                text-align: center;
            }
            
            table{
                width: 400px;
                border-left: 1px solid #999;
                margin-left: 200px;
            }
            table td,table th{
                border-right: 1px solid #999;
                border-bottom: 1px solid #999;
                text-align: center;
            }
            table p{
                text-align: left;
            }
            
        </style>

祝大家，平安夜快乐!双蛋快了，新年快乐！

posted @ 2016-12-24 10:55  whq920729  阅读(1201)  评论(0)    收藏  举报