0

我想制作一个 div，其中多个 div 位于主 div 的底部，并且我添加的所有 div 水平显示

例子

------------------------
|                      |
|   Main Div           |
|                      |
|                      |
|-----|-----|          |
| div | div |          |
|----------------------|

我已经有了这段代码，但它没有在底部显示子 div

<style>
.spectrumcontainer{
    width: 1000px;
    height: 400px;
    border: solid 1px black;
    /*margin-top: 0px;
    margin-left: 0px;*/
    /*padding: 0px;
    /*text-align: left;
    vertical-align: bottom;*/
    position: relative;
    /*float: none;*/
    overflow: auto;
    white-space: nowrap;
}
.redbar{
    width: 35px;
    height: 15px;
    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 50%, #e50000 51%, #aa0000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(50%,#ff0000), color-stop(51%,#e50000), color-stop(100%,#aa0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* IE10+ */
    bottom: 0;
    left: 0;
    /*position: absolute;*/
    float: left;
    display: inline-block;

}
.orangebar{
    width: 35px;
    height: 15px;
    background: #ff7f00; /* Old browsers */
    background: -moz-linear-gradient(left, #ff7f00 0%, #fc8600 50%, #e26200 51%, #bf5c00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff7f00), color-stop(50%,#fc8600), color-stop(51%,#e26200), color-stop(100%,#bf5c00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* IE10+ */
    bottom: 0;
    left:0;
    /*position: absolute;*/
    float: left;
    display: inline-block;
}
</style>
<div class="spectrumcontainer">
    <div class="redbar"></div>
    <div class="orangebar"></div>
</div>

但它不能正常工作。

这是现场示例

http://jsfiddle.net/kelelehead/KQwnp/

4

3 回答 3

1

您将不得不使用额外的 div 来包含彩色 div。

    <html>
<head>

<style>
.spectrumcontainer{
    width: 1000px;
    height: 500px;
    border: solid 1px black;
    /*margin-top: 0px;
    margin-left: 0px;*/
    /*padding: 0px;
    /*text-align: left;
    vertical-align: bottom;*/
    position: relative;
    /*float: none;*/
    overflow: auto;
    white-space: nowrap;
    display:table;
}

.barContainer {
    position: absolute;
    top: 95%;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 15px;
    margin: auto;
    background:#ddd;

    }
.redbar{
    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 50%, #e50000 51%, #aa0000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(50%,#ff0000), color-stop(51%,#e50000), color-stop(100%,#aa0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 50%,#e50000 51%,#aa0000 100%); /* IE10+ */
    float: left;
    width: 35px;
    height: 15px;


}
.orangebar{
    background: #ff7f00; /* Old browsers */
    background: -moz-linear-gradient(left, #ff7f00 0%, #fc8600 50%, #e26200 51%, #bf5c00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff7f00), color-stop(50%,#fc8600), color-stop(51%,#e26200), color-stop(100%,#bf5c00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ff7f00 0%,#fc8600 50%,#e26200 51%,#bf5c00 100%); /* IE10+ */
    float: left;
    width: 35px;
    height: 15px;   
}

</style>
</head>
<body>

    <div class="spectrumcontainer">
        <div class="barContainer">
            <div class="redbar"></div>
            <div class="orangebar"></div>
            <div class="redbar"></div>
            <div class="orangebar"></div>
            <div class="redbar"></div>
            <div class="orangebar"></div>
            <div class="redbar"></div>
            <div class="orangebar"></div>
        </div>
</div>


</body>

请参阅以下小提琴中的示例：

   http://jsfiddle.net/DD75W/

.barContainer top % 将允许您具有与基本 div 相关的百分比高度，从而允许您控制垂直位置。

干杯。

于 2013-05-16T17:45:40.300 回答
1

如果您使用具有固定高度的 div，我知道一个解决方案。

html代码：

<body>
<div class="main">
    <div class="bottom">
        div #1
    </div>
    <div class="bottom">
        div #2
    </div>
    <div class="bottom">
        div#3
    </div>
</div>
</body>

CSS：

.main{
   background-color: red;
    height: 200px;
    width: 100%;
}

.bottom{
    position: relative;
    top:100px;
    left:0px;
    height: 100px;
    width: 50px;
    background-color: green;
    color: white;
    float: left;
    margin-right: 3px;
}

小提琴：

http://jsfiddle.net/aleruar/8gyH8/

于 2013-05-16T17:31:38.547 回答
1

如果您在底部动态创建 DIV，或者甚至需要有很多 DIV，我认为更好的方法是在底部创建另一个容器，position:absolute正如 Mauro Laurent 所说。

.containerBottom {
    position:absolute;
    bottom:0;
    width:200px;
}

您可以在小提琴中看到一个示例：jsfiddle.net/rafakol/SRVL7/1

如果添加新的 DIV，则无需更改 CSS。

希望能帮助到你。

于 2013-05-16T18:47:18.167 回答