與內容廣場DIV在流動佈局

我創建了一個網站四柱液體寬度的佈局，和我的工作將流體正方形的DIV，我的一列中。我發現有幾種技術可以實現這一點 - 即將填充底部設置爲與寬度相同的百分比 - 但是當DIV包含內容時，這些技巧似乎都不起作用。

當DIV包含內容時，是否有辦法在流體DIV上保持1：1（方形）比率？

這裏是我的HTML：

<div id="leftmostcolumn"> 
<div id="logo"></div> 
</div> 
<div id="leftcolumn"></div> 
<div id="rightcolumn"></div> 
<div id="rightmostcolumn"></div>

我的CSS：

body { 
width: 100%; 
height: 100%; 
background-color: red; 
} 

#leftmostcolumn { 
position: absolute; 
top: 0; 
left: 0; 
width: 25%; 
height: 100%; 
background-color: blue; 
} 

#leftcolumn { 
position: absolute; 
top: 0; 
left: 25%; 
width: 25%; 
height: 100%; 
background-color: green; 
} 

#rightcolumn { 
position: absolute; 
top: 0; 
left: 50%; 
width: 25%; 
height: 100%; 
background-color: yellow; 
} 

#rightmostcolumn { 
position: absolute; 
top: 0; 
left: 75%; 
width: 25%; 
height: 100%; 
background-color: gray; 
} 

#logo { 
width:100%; 
padding-bottom:100%; 
background-color: #aa2d2d; 
color: white;  
}

這裏還有一個JsFiddle。

DIV「徽標」是我試圖維護的一個正方形。現在，我已經使用了填充底部方法，但是當DIV中有內容時，這並不起作用。任何輸入非常感謝！

馬卡報

編輯：

到達那裏......我改編劇本，我發現找到DIV的寬度，然後該值適用於高度，以保持它的方。然而，現在的腳本並沒有不斷調整DIV的大小，並且它不會讓它縮小到一定的尺寸以下。有關如何糾正這些問題的任何想法？

HTML：

<div id="box"></div>

CSS： #box { width: 75%; height: 50px; background-color: black; }

JQUERY：

$("#box").css("height", function() { 
return $(this).width(); 
});

的jsfiddle是here。

來源

2012-11-10 Marcatectura

將所有四列放在一個div中。設置該div至100％的寬度，並設置字體大小爲100em

有每個四列有25em的寬度，而不是25％

有徽標的寬度和高度設置爲25em每個

來源

2012-11-12 07:34:48 Fisch

這是我實際上已經搞亂了一段時間，並提出了一個準（但不是完全）哈克，純CSS的解決方案，似乎在過去十年中在大多數瀏覽器上工作。訣竅是使用圖像，並以一種棘手的方式進行定位。考慮以下（簡化）你的代碼。

標記：

<div class="sqr_box"> 
    your content goes here! 
</div>

CSS：

.sqr_box 
{ 
    width: 50%; /* or 100px, or 20em, or whatever you want */ 
    border: solid 2px pink; 
    background-color: grey; 
    color: white; 
}

現在，我們不能設置百分比而言，高度，所以我們不會;相反，首先我們要進入Photoshop，製作一張2×2像素，透明或背景色的圖像。下一步，我們將以下添加到您的標記：

<div class="sqr_box"> 
    <img src="images/sizers/2x2.png" class="sizer"> 
    <div class="content">your content goes here!</div> 
</div>

，這對你的CSS：

.sqr_box 
{ 
    width: 50%; /* or 100px, or 20em, or whatever you want */ 
    position: relative; /* static positioning is less than ideal for this scenario */ 
} 

.sqr_box > img.sizer 
{ 
    display: block; /* images default to an inline-block like thing */ 
    width: 100%; 
    height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */ 
    visibility: hidden; 
} 

.sqr_box > .content 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 

    width: 100%; 
    height: 100%; /* Our parent element now has a dynamically assigned height, this will work */ 

    border: solid 2px pink; 
    background-color: grey; 
    color: white; 
}

最重要的是，這會爲你想要盒子的任何規模的比率工作！只要改變圖像的比例！

希望這一切都與你有關，3個月後。

-Sandy

來源

2013-02-18 15:17:13

與內容廣場DIV在流動佈局

回答

相關問題