Question

我正在尝试创建一个包含多列的表。每列表都有一个图像。当我尝试实现它时，输出布局总是错误的。第二个和第三个容器应该分别以50％的比例划分，但事实并非如此。你能帮忙吗？下面是js小提琴

    <html>
<!DOCTYPE html>
<html>
    <head>


  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
             <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <style>
                .ffpad13,.ffpad14,.ffpad15 {
        position: relative;            
    }

body,html
            {

                                width: 100%;
                height: 100%;
            }

             #dummy * td
            {
                   position: relative;
                overflow: hidden;

            }
              #dummy * img
            {
                position: absolute;
                top:0;
                left:0;
            }
            #dummy * table{

                                width: 100%;
                height: 100%;

            }
            #dummy
            {
                overflow: hidden; 

            }
            .mainDiv
            {

                position: absolute;
                width: 100%;
                height: 100%;
                display:inline-block; 

            }
        </style>
  <script>

            $(document).ready(function() {

                      for( var i=13;i<=15;i++){
       $('#dummyL'+i).wrapInner('<div class="ffpad'+i+'"></div>');

            var $ffpad = $('.ffpad'+i),
                $parent = $('.ffpad'+i).parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {              

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }
            }
            }
            );
                </script>

     </head>
    <body>
       <div id="dummy" style="position: relative;height: 25%;width: 50%;display: inline-block">

             <div class="mainDiv" id="msl_3_2">
                <table border="1" cellspacing="10">
                    <tr>          
                        <td rowspan="2" id="dummyL13">
                      <img src='http://www.martcode.com/images/demo.jpg' width="100%" height="100%"/>       
                    </td>
                        <td  id="dummyL14">     
                         <img src='http://www.martcode.com/images/demo.jpg' width="100%" height="100%"/>   
                        </td>

                    </tr>
                    <tr>
                        <td id="dummyL15">    
                            <img src='http://www.martcode.com/images/demo.jpg' width="100%" height="100%"/>   
                        </td>
                    </tr>              
                </table>   
            </div>
       </div>
    </body>
</html>

以下是结果

http://jsfiddle.net/GAWhV/embedded/result/

结果中表格的布局不正确。

我在td上使用outerHeight动态定义td元素的大小。我这样做是因为在Firefox中有一个错误，因为td没有将适当的高度传递给它的孩子。所以我将td子包装在div中，并使用td的outerHeight来定义div的大小。

这个技巧在没有rowspan时有效，但是当有rowspan然后它没有正常工作，如代码所示。即使我试图利用嵌套表并删除rowspan但情况相同。

在所有浏览器中使用rowspan时，td不会返回正确的高度

0 个答案: