簡體   English   中英

如何用html + css做這樣的布局?

[英]How to do such layout with html+css?

在此輸入圖像描述

盒子是一些物體(按鈕,標簽,textarea)。 格林的大小是動態的。 特別是我有一個問題,藍色框粘到底部。

在它周圍放置一個固定器,它將從“綠色”固定器獲得高度,並且僅給出它們的絕對值和底部0,無論你給元素的寬度是多少都無關緊要。

編輯:希望這適合你,浮動元素,綠色的一個,其余的左邊。

<div id="divHolder">
<label id="red">Label</label>
<button id="blue">Button</button>
<div id="green">
    a
    </div>
    <br class="clearFloat" />
</div>

#divHolder {
    width:300px;
    position:relative;

}
#green {
    height:300px;
    background-color: green;
    float:right;
}
#red {
    background-color:red;
     float:left;
    position:absolute;
}
#blue {
    background-color: blue;
    bottom: 0;
    position:absolute;
}
.clearFloat {
 clear:both;   
}

在這里查看: http//jsfiddle.net/YA9yD/32/

請參閱以下示例→

只要指定了藍色和紅色寬度,就可以使用relative位置和absolute位置,如下所示:

<div id="green">
    <label id="red">Label</label>
    <button id="blue">Button</button>
</div>

#green {
    position:relative;
}
#red {
    width:100px;
    position:absolute; left:-110px; top:0px;
}
#blue {
    width:100px;
    position:absolute; left:-110px; bottom:0px;
}

這是我的解決方案→

這里的主要問題是左側列不知道右側列的高度。

您可以將它們放在一起(將包裝兩列),但左側列將不知道父級的高度,因為子元素只能擴展到父元素的高度,如果父元素的高度是明確設定。

此外,這里有兩個不同的列,所以我想嘗試將它們分組盡可能接近它們的顯示方式。 將左列放在右列(綠色框)內並不能准確地表示它的結構。

HTML:

<div id="container">
    <div id="labelDiv">
        <label>I'm a label.</label>
        <p>Text area, whatevs.</p>
    </div>

    <button>Hello</button>

    <div id="greenBox">
        <p>Green box text.</p>
    </div>
</div>

CSS:

#container {
    width: 610px;
    overflow: hidden;
    position: relative;
}

#labelDiv {
    width: 300px;
    float: left;
}

button { 
    position: absolute;
    bottom: 0;
    left: 0;
}

#greenBox {
    width: 310px;
    float: left;
}

所以左邊的所有東西(按鈕除外)都向左浮動,綠色框也向左浮動。 到目前為止很棒,但按鈕需要知道整個盒子的高度,以便它可以自己附着到底部。 因此,我們將overflow設置為hidden在外部容器上,以便它包裹浮動元素,並且將按鈕絕對定位到底部,使其與最高內部元素(綠色框​​)的底部完全對齊。

我還建議在#labelDiv上設置一些margin-bottom ,這樣它就不會掩蓋按鈕。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM