CSS DIV溢出隱藏和浮動

創建體與左邊文本並採取一切可用的空間，PX的量從最大到最小故能浮動。在該div的右側，我想添加一個新的div，最後將包含一個菜單。

我把這個論壇上一看，並試圖多東西，但我無法實現我想要的。

我希望我的右邊#rightcolumn時，這是可能的，當它不是，它應該只是被隱藏。

我成功地找到了我想要的一切，但從來沒有在同一時間。

我與相關位置的工作，內聯，而不是浮點和無浮點它不是在同一行。

這裏是我的實際代碼：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    b, u, i, center, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, 
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, 
    time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
    } 
    /* HTML5 display-role reset for older browsers */ 
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section { 
    display: block; 
    } 
    body { 
    line-height: 1; 
    } 
    ol, ul { 
    list-style: none; 
    } 
    blockquote, q { 
    quotes: none; 
    } 
    blockquote:before, blockquote:after, 
    q:before, q:after { 
    content: ''; 
    content: none; 
    } 
    table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    } 



img 
{ 
float:bottom; 

border:1px dotted black; 
margin:0px 0px 15px 20px; 
} 
p { 
    padding: 10px; 
} 

#rightcolumn{ 
    margin-left: -150px; 
    width: 150px; 
    height: 100px; 
/* float:left;*/ 
    background: #CC33FF; 
float:left; 
overflow:hidden; 
    } 

#wrapper { 
    width: 100%; 
    min-width: 1000px; 
    max-width: 1000px; 
    margin: 0 auto; 
white-space:nowrap; 

} 


#contentliquid { 
    float: left; 
    width: 100%; 
    min-width: 1000px; 
float:left; 
} 

#content { 

    background: #FFFFFF; 
    margin-left: 0px; 
    min-width: 1000px; 
float:left; 
} 

</style> 
</head> 

<body> 
<div id="wrapper"> 

    <div id="contentliquid"> 
     <div id="content"> 
      Test coucou 
      </div> 
    </div> 

<div id="rightcolumn"> 
      <p>This is right</p> 
     </div> 

</div> 
</body> 

</html>

來源

2014-05-13 Mathese F

，你可以爲你的代碼一個js小提琴？ – adi

一個Jsfiddle會有幫助 – ByronMcGrath

確實一個Jsfiddle會非常有幫助.. ' – Drogon

如果我明白你的問題是正確的。我會說這將使用JavaScript

容易

$（文件）。就緒（函數（）{ VAR length_of_content = $（ '＃內容'）寬度（）;

if((length_of_content+$('#rightcolumn').width()) >= 500) { 
    $('#rightcolumn').css('display', 'none'); 
}

}） ;

只需檢查當前內容的亮度並添加要顯示的菜單的寬度，如果寬度大於等於500或者任何容器的最大大小應該是，則只需隱藏菜單，否則顯示#rightmenue，否則顯示它。

來源

2014-05-13 10:14:56 user3631948

是的我可以用JavaScript來做，主要是做它使用平板電腦和智能手機。但我問這個，因爲它是一個鍛鍊我自己的創造來提高我的CSS，當我的教程後找我發現了禪CSS花園是做......我的CSS，但它是一個有點複雜的對CSS初學者作爲我:) –

CSS DIV溢出隱藏和浮動

回答

相關問題