Question

所以目前当我在我的列表中添加一个新条目时，它是这样的： [输入] - ＆gt; [新条目] 然后从下面的线开始。我该如何操作它首先直接填充第一行，然后创建第二行并将其直接填充。

更容易表明我的意思。我会给每个条目一个数字，并说明它是如何工作的。

现在如何运作：

1 2

3 4

5 6 ...

我希望它的工作方式如下：

1 4

2 5

3 6

任何人都知道我应该怎么做？

代码来到这里。

HTML

<div id="staffs">
   <h5>The Management</h5>
   <p>
     <div class="staff_box">
        <img src="/images/users/1.png" class="staff_img" />
        <h3 class="staff_name">Sarah Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
        <text class="staff_pos">CEO, Founder, Owner</text>
      </div>
      <div class="staff_box">
         <img src="/images/users/1.png" class="staff_img" />
         <h3 class="staff_name">David Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
         <text class="staff_pos">CEO, Founder, Owner</text>
      </div>
      <!--Same boxes are repeated-->
    </p>
</div>

CSS：

#staffs {
width: 530px;
height: 275px;
float: left;
clear: left;
overflow-y: hidden;
}

h5 {
text-align: center;
background: #222;
color: #888;
padding: 5px;
width: 510px;
font-weight: bold;
border-radius: 4px;
}

.staff_country {
height: 12px;
width: 12px;
}

.staff_box {
width: 175px;
height: 50px;
margin-left: 5px;
margin-top: 5px;
clear: left;
display: inline-block;
}

.staff_img {
height: 50px;
width: 50px;
float: left;
margin-right: 3px;
border-radius: 4px;
border: 1px solid #BBB;
}

.staff_name {
font-size: 13px !important;
margin: 0 !important;
padding: 0 !important;
padding-top: 2.5px !important;
}

.staff_pos {
font-size: 11px;
color: #777;
}

要看到它的实际效果，这里是一个JSFiddle：http://jsfiddle.net/7MfLU/4/

我还需要一些关于如何将顶部条目移到更高位置，靠近标题栏的帮助。

Answer 1

可能最简单的方法，因为你只是使用div，就是在你的HTML中重新排序它们。您还可以在staff_box中创建两个diva，左侧和右侧，并将您的diva放在相应的列中。要将条目移近标题栏，请将margin-top更改为更小的值（如果需要，可以变为负数）。

扩大？

1 个答案: