我在尝试在容器div中同等地放置5个div内联时遇到了一些问题。
我创建了一个演示Fiddle Demo
我的悬停也有问题(演示没有正确行为)但是css会在悬停时淡入,而不是只是出现。
所以这是我对网格和容器的css:
.span_5_of_5 {
width: 100%;
}
.span_4_of_5 {
width: 79.68%;
}
.span_3_of_5 {
width: 59.36%;
}
.span_2_of_5 {
width: 39.04%;
}
.span_1_of_5 {
width: 18.72%;
}
.containeralt{
margin: 0 auto;
width: 900px;
padding: 20px 0 0 0;
position: relative;
}
此时的任何帮助都将非常受欢迎。
答案 0 :(得分:2)
我认为使用text-align:center;
和display:inline-block;
我已经删除了很多HTML到基础知识,因为有很多未使用的<spans>
甚至是<center>
,未使用的类,可能在某些未发布的Javascript等中使用的额外代码。不知道那里发生了什么,所以我删除了任何不必要的东西,这是我认为你所追求的基础知识:
HTML:
<div id="imgDiv3">
<div class="wrapper">
<div class="circle"></div>
<p class="circletext">APPS</p>
</div>
<div class="wrapper">
<div class="circle"></div>
<p class="circletext">WEB DESIGN</p>
</div>
<div class="wrapper">
<div class="tabletouter">
</div>
</div>
<div class="wrapper">
<div class="circle"></div>
<p class="circletext">MOBILE</p>
</div>
<div class="wrapper">
<div class="circle"></div>
<p class="circletext">PC/MAC</p>
</div>
</div>
CSS:
div.circle {
border-radius: 60px;
height: 120px;
width: 120px;
background-color: #3B5163;
}
div.tabletouter {
width: 295px;
height: 354px;
border-radius: 10px;
background-color: #3B5163;
background-repeat: no-repeat;
background-position: center center;
}
.circletext {
font-family:"museo-slab";
font-size: 17px;
line-height: 26px;
font-weight: 300;
color: #666666;
}
#imgDiv3 {
width: 100%;
text-align: center;
}
.wrapper {
display: inline-block;
margin:0 20px;
}