調整分頻器的寬度，如果圖像存在

我有一個分離器，浮動左邊的財產住房一些文字，然後分配浮動右房屋圖像。兩個分隔線的總寬度應不大於735，並且我保留了200個圖像。如果圖像存在，如何將第一個分隔線的寬度調整爲535，如果圖像隱藏，如何調整寬度？調整分頻器的寬度，如果圖像存在

<div style="width:735px"> 
    <div style="float:left; width=????????> 
     some text here 
    </div> 
    <div style="float:right"> 
     <img src="../images/biteme.png" alt="" style="height:auto; width:auto; max-height:115px; max-width:200px; display:block" /> 
    </div> 
</div>

來源

2013-07-17 Lukas

你願意/能夠使用JQuery嗎？ – SharkofMirkwood

你可以使用jquery來檢查圖像是否隱藏，並調整'$（document）.ready（）' – DFord

真的試圖避免jquery只是因爲這個例子很簡單，頁面比NASA更復雜，任天堂合併（是的，威爾史密斯引用，我知道）。儘管我可能不得不使用jquery或backside。只是希望有一個簡單的CSS修復。 – Lukas

要在純CSS中做到這一點很容易，你需要一種不同的方法。只有一個浮動DIV，然後其他的將自動剩餘空間

DEMO http://jsfiddle.net/kevinPHPkevin/gAUR5/

img { 
    width: auto; 
    height: auto; 
    max-width: 200px; 
    display: block; 
}

設置img css來display: none並看到其他分區佔用了所有的剩餘空間。

來源

2013-07-17 19:54:01 Vector

這是有效的，但由於其他內部元素，我在分頻器內（不僅僅是文本），由於某種原因，它失敗了我。儘管如此，你讓我踏上了正確的道路，而且你已經證明這確實有效。 +1，已選中，並感謝您的洞察力。在解決此問題之前，我將採取後端代碼調整（不能使用jQuery，因爲大多數圖像是a）隱藏，b）由調用BLOB的處理程序頁面加載，c）頁面本身是一個控件，它默認情況下隱藏內部元素，除非被調用包括-images等）是的，它很大。再次感謝你！ – Lukas

+1簡單的解決方案 –

我不知道這是否正確回答你的問題，但我認爲一個解決方案可能是設置左側DIV（除）的寬度爲‘自動’，而不是去爲一個固定的寬度。另外，您應該考慮將兩個元素均浮動到右側，以便左側div可以響應右側div的大小更改。否則，您將需要依靠javascript來影響DOM元素（JQuery將使這更容易）。

來源

2013-07-17 19:49:18 Wasabi

汽車沒有工作，這讓我感到驚訝，但這可能是由於我缺少內部寬度的劃分。這個解決方案確實有意義。 +1 – Lukas

如果你可以使用jQuery，這會做這種伎倆：

$(document).ready(function(){ 
    var width; 
    if($('#outerdiv #rightdiv img').is(":visible")) { 
     width = 735; 
    } else { 
     width = 535; 
    } 
    $('#outerdiv #leftdiv').css('width', width); 
});

如果你不能使用JQuery，我不認爲你想做的事是可能的。

來源

2013-07-17 19:49:25 SharkofMirkwood

我沒有提到我希望排除jQuery，因此這將起作用。 +1 – Lukas

調整分頻器的寬度，如果圖像存在

回答

相關問題