Html 如何在一条线上部署三个相邻的div元素?
我有以下问题。我有一个div,它围绕着另外三个div元素。 我希望这三个div元素并排放置在一行上,并且只有average(div2)可见。 我试过显示:内联和浮动:左;在这三个div上没有运气。 元素一个接一个地放置,每个元素位于新行上。我想让这些部门 在一条线上。如图所示。我将感谢任何帮助。 这是我的css代码:Html 如何在一条线上部署三个相邻的div元素?,html,css,Html,Css,我有以下问题。我有一个div,它围绕着另外三个div元素。 我希望这三个div元素并排放置在一行上,并且只有average(div2)可见。 我试过显示:内联和浮动:左;在这三个div上没有运气。 元素一个接一个地放置,每个元素位于新行上。我想让这些部门 在一条线上。如图所示。我将感谢任何帮助。 这是我的css代码: html, body{ height: 100%; } #linksHolder { width: 50%; height: 25%; margi
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;
}
致以最良好的祝愿
Average div是div 2,我希望div 2是可见的,而不是div 1在本文档中可见 您必须对元素应用位置: 像这样
也许您可以尝试将.holderItem的宽度设置为30%,这样您就可以将3个元素放在一行中 如果要隐藏div 1和div 3,可以添加一个显示特性(或可见性),该特性与first of type和last of type组合在一起 这有帮助吗 当您将3个div设置为99%时,每个div都不合适。 我已将它们设置为32%(+边框),并将可见性设置为“隐藏”
PS:uppps。。。相当晚了您所说的“并且只有平均值(div2)才可见”是什么意思?您需要查看一些代码。您可以将div设置为inline,然后将其向左浮动,但始终需要一些有问题的代码,以便我们进行调查。你所说的可见的平均值(第2部分)是什么意思。对我来说,听起来像个滑块是的。这是滑块。我正在使用jqueryui。代码很长。我将创建JSFIDLE。是的,这听起来像是你需要寻找一个JavaScript或jQuery幻灯片pluginFloat和position absolute,如果两者结合在一起的话。我不知道你怎么能在没有看到他的代码的情况下想出这个答案和摆弄。显然,创建问题的您的版本并不难解决
#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;
}
.holderItem {
border: 1px solid red;
width: 32%;
height: 98%;
float: left;
display: inline-block;
}
.holderItem:first-child { visibility: hidden; }
.holderItem:last-child { visibility: hidden; }