Question

我想创建一个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/

Answer 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/

Answer 2

您必须使用额外的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相关的百分比高度，允许您控制垂直位置。

干杯。

Answer 3

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

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

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

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

希望它有所帮助。

容器div上水平多个div

3 个答案: