基於圖像的相對div高度

我有兩列，左邊是一些背景顏色的文字，右邊是圖像。基於圖像的相對div高度

這裏的基本結構：

<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？

來源

2014-04-27 Andrew Walters

你的html裏面沒有類'.plc-logo'。基本上，如果你在一個td中使用div，那麼你只需要將'height'設置爲'auto'。 – alpham8

@ alpham8這是在。檢查出小提琴，如果你刪除了JavaScript左邊的列獲取所有虛擬 –

好，所以，表的默認行爲是，它自動適合其內容大小。所以，我認爲修復它的最簡單方法是將height和width屬性設置爲img標籤。請記住，還需要在img標籤中使用alt屬性，如果未設置，也會導致問題。 – alpham8

您正在使用<li>裏面的<div>標籤.... li標籤應始終在<ul>或<ol>標籤內。

其餘的代碼沒問題。

Check the Demo

我轉身格中UL &刪除內聯CSS高度。

來源

2014-04-27 04:14:52

我需要高度保持一致，所以營銷文本框不能高於圖像。你會知道如何用ul來實現嗎？ –

不要混淆UL＆div的更多關於CSS然後標籤。在div上工作的css將在UL上以相同的方式工作。 –

對不起，我只是注意到，它劑量響應尺寸的變化 –

基於圖像的相對div高度

回答

相關問題