基于图像的相对div高度

时间:2014-04-27 03:27:29

标签: css

我有两列,左边是一些带背景色的文字,右边是图像。

完整示例:http://jsfiddle.net/kvFG4/

这是基本结构:

<div class="container">
    <table style="height:auto;">
        <tbody>
            <tr>
                <td align="center" style="width:35.7143%">
                    <div data-cycle-fx="fade" data-cycle-timeout="5000" data-cycle-speed="2000" data-cycle-slides="li" class="squareMarketingText cycle-slideshow squareMarginTop" id="dnn_squareMarketingTextPane" style="position: relative; height: 548px;">
                        <li style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;" class="cycle-slide cycle-sentinel">
                            <div class="squareOrange" style="visibility: hidden;">
                                <span class="center marketingText" style="visibility: hidden;">
        CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO
        </span>
                            </div>
                        </li>

                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <li style="position: absolute; top: 0px; left: 0px; z-index: 97; opacity: 0; display: block; visibility: hidden;" class="cycle-slide">
                            <div class="squareOrange">
                                <span class="center marketingText">
        CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO
        </span>
                            </div>
                        </li>
                    </div>
                </td>
                <td style="width:64.2857%">
                    <img class="plc-logo" src="http://newsite.plcellc.com/Portals/_default/Skins/PLC//images/AllSquares.png">
                </td>
            </tr>
        </tbody>
    </table>

</div>

我希望左栏中的文字能够灵活地使用正确的列,但我能够让它工作的唯一方法就是使用此javascript:

setTimeout(function () {
            $(".squareMarketingText").css({ 'height': ($(".plc-logo").height() + 'px') });
        }, 500);

左边的列是否只有.css?

1 个答案:

答案 0 :(得分:0)

您在<li>代码中使用<div> ....标记应始终位于<ul><ol>标记内。

你的其余代码很好。

<强> Check the Demo

我转入了UL&amp;删除了内联css高度。