css - Css 技巧 - 如何对齐 4 个 div

Question

我的 HTML 中有 4 个 div，我希望保持相同的外观：（每种颜色一个 div，总共 4 个（不包括背景颜色））

对于当前场景：

我有以下 jsFiddle：这里

我的大问题是当我在我的 中添加另一个项目<li> 时<ul>，结果是我有以下内容：

Css 与它们的一种重叠方式 :'( （哭泣）

  body {
    background-image:url('http://subtlepatterns.com/patterns/shattered.png');
    margin:0;
}
.chatBody {
    position:absolute;
    bottom:0;
    height:200px;
    width:100%;
    background-color:#3c454f;
    border-top: 10px solid #7ac943;
}
#navlist li {
    display: inline;
    list-style-type: none;
    width:300px;
}
.avatarUser {
    height:80px;
    width:80px;
    background-color:yellow;
    float:left;
    margin-right:20px;
    margin-bottom:20px;
}
li > .frdImage {
    position: relative;
    /*margin-top:-25px;*/
    top:50%;
    float:left;
    margin-left:5px;
    border-radius: 6px;
    border: solid 2px #aaa;
    height:80px;
    width:80px;
    background-color:yellow;
    margin-right:10px;
    margin-bottom:20px;
}
li > span.frdName {
    position:absolute;
    float:left;
    margin-top:10px;
    font-weight: bold;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    margin-right:200px;
}
.active{
    width:300px;
}
.frdStatusIndicator{
    float:left;
    margin-top:40px;
    height:15px;
    width:15px;
    background-color: #7ac943;
    border-radius: 10px;
}
.frdStatusName{
    float:left;
    margin-top:40px;
    border-radius: 10px;
    font-family:'Verdana', cursive;
    font-size: 15px;
    color: white;
    line-height:15px;
    padding-left:5px;
}

有人可以帮我解决这个问题吗？既然已经非常感谢你们的时间了！

Answer 1

这个对于html怎么样

<div class="chatBody">
    <div id="navlist">
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes</div>
                <div class="frdStatusIndicator online"></div>
                <div class="frdStatusName">Online</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the second</div>
                <div class="frdStatusIndicator idle"></div>
                <div class="frdStatusName">Idle</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the third</div>
                <div class="frdStatusIndicator online"></div>
                <div class="frdStatusName">Online</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the fourth</div>
                <div class="frdStatusIndicator offline"></div>
                <div class="frdStatusName">Offline</div>
            </div>
        </div>
        <div class="tile active">
            <div class="frdImage"></div>
            <div class="stuff">
                <div class="frdName">Igor Gomes the fifth</div>
                <div class="frdStatusIndicator idle"></div>
                <div class="frdStatusName">Idle</div>
            </div>
        </div>
    </div>
</div>

这对于css：

  body {
    background-color: #3c454f;
  }
  #navlist > div.tile {
      display: inline-block;
      width:300px;
      border: solid 1px red;
      position: relative;
  }
  .avatarUser {
      height:80px;
      width:80px;
      background-color:yellow;
      float:left;
      margin-right:20px;
      margin-bottom:20px;
  }
  div.tile > .frdImage {
      border-radius: 6px;
      border: solid 2px #aaa;
      height:80px;
      width:80px;
      background-color:yellow;
      display: inline-block;
  }
  div.tile > div.stuff > div.frdName {
      position:relative;
      display: inline-block;
      right: 0px;
      margin-top:10px;
      font-weight: bold;
      font-family:'Verdana', cursive;
      font-size: 15px;
      color: white;
      width: 200px;
  }
  .active{
      width:300px;
  }
  div.tile > div.stuff {
      position: relative;
      top: -2em;
      width: 208px;
      /* border: solid 1px green; */
      display: inline-block;
  }
  .frdStatusIndicator{
      position: relative;
      height:15px;
      width:15px;
      background-color: #7ac943;
      border-radius: 10px;
      display: inline-block;
  }
  .frdStatusName{
      position: relative;
      border-radius: 10px;
      font-family:'Verdana', cursive;
      font-size: 15px;
      color: white;
      line-height:15px;
      padding-left:5px;
      display: inline-block;
  }
  .offline {
      background-color: #FF0000;
  }
  .online {
      background-color: #00FF00;
  }
  .idle {
      background-color:  #FFFF00;
  }

我想我必须为此做一个 jsfiddle ... http://jsfiddle.net/bbutler/TMgs5/1/

Answer 2

尝试将宽度设置为列表中的此 div，即例如：100px 并尝试它不会重叠

 <div style="display:inline; float:left;width:100px">

谢谢 AB

Answer 3

只需在 JSFiddle 中使您的窗口更大。

只需查看下面的 jsfiddle。你几乎走在正确的轨道上。

http://jsfiddle.net/TYZ64/4/

#navitem li
{
    display:inline-block;
}

我只是改变了那部分。