Question

我在尝试在容器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;
}

此时的任何帮助都将非常受欢迎。

Answer 1

我认为使用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;
}

小提琴：http://jsfiddle.net/uwjC7/

将div平均定位在容器中

1 个答案: