html - 如何在一行上部署三个相邻的 div 元素？

Question

我有以下问题。我有一个 div，它围绕着其他三个 div 元素。我希望这三个 div 元素并排放置在一行上，并且只有平均值（div 2）可见。我试过 display: inline 和 float: left; 在这三个 div 上没有运气。这些元素一个一个地位于另一个之下，每个元素都在一个新行上。我希望这些 div 放在一条线上。如图所示。我将不胜感激任何帮助。这是我的CSS代码：

html, body{
    height: 100%;
}

#linksHolder {
    width: 50%;
    height: 25%;
    margin: 0px auto;
    overflow: hidden;
    text-align: center;
}
.holderItem {
    border: 1px solid red;
    width: 99%;
    height: 98%;
    float: left;
    display: inline;
}

http://jsfiddle.net/zono/nGC2P/

此致。

平均 div 是 div 2 我希望 div 2 是可见的，而不是在这个时刻可见的 div 1。

Answer 1

这有帮助吗？

http://jsfiddle.net/nGC2P/73/

当您将 3 个 Div 分别设置为 99% 时，它不适合。我已将它们设置为 32%（+ 边框），并将可见性设置为“隐藏”

.holderItem {
    border: 1px solid red;
    width: 32%;
    height: 98%;
    float: left;
    display: inline-block;
}
.holderItem:first-child { visibility: hidden; }
.holderItem:last-child { visibility: hidden; }

PS：uppps ......很晚了

Answer 2

也许您可以尝试将 .holderItem 的宽度设置为 30%，这样您就可以将 3 个元素放在一行中。

如果你想隐藏 div 1 和 3，你可以添加一个显示属性（或可见性）结合第一个类型和最后一个类型。

http://css-tricks.com/almanac/selectors/f/first-of-type/

Answer 3

您将不得不将位置应用于您的元素：

像这个jsfiddle.net

#div1{
    float:left;
    width:215px;
    background-color:red;
    position: absolute;
    bottom: 0px;
}

#div2{
    float: left;
    width: 300px;
    background-color: red;
    bottom: 0px;
    left: 216px;
}

#div3{
    float:right;
    width:215px;
    background-color:yellow;
    position: absolute;
    bottom: 0px;
    right: 0px;
}