具有不同位置（右或左或完整）的 HTML Div 列表

Question

我有一个在 div 内按行显示的对象列表。当它们全宽时，它们工作正常。一旦我尝试让内部对象占据父对象的左半部分或右半部分，它们就会导致各种问题。下面是我希望它们出现的方式，以及它们实际出现的方式。如何使用 html/css 实现这种布局？我试过浮动元素（这往往会弄乱父列表）和内联块，但没有运气。

Plnkr：http://plnkr.co/edit/bP0ZWFplDFc6755LNNb5?p=preview

HTML：

<div class="employee-container">
  <div class="full-shift">
    <p>Person 1 <span>(40)</span></p>
  </div>
</div>
<div class="employee-container">
  <div class="full-shift">
    <p>Person 2 <span>(40)</span> <span class="fa fa-clock-o"></span></p>   
  </div>
</div>
<div class="employee-container">
  <div class="first-half">
    <p>Person 3 <span>(40)</span></p>
  </div>
  <div class="second-half"></div>
</div>
<div class="employee-container">
  <div class="first-half"></div>
  <div class="second-half">
    <p>Person 4 <span>(44)</span></p>
  </div>
</div>

CSS：

.employee-container {
  margin-bottom: 6px;
  margin-top: 6px;
}
.employee-container > div {
  padding: 3px;
  background-color: lightsteelblue;
}
.employee-container > div .full-shift {
  width: 100%;
}
.employee-container > div .first-half {
  width: 50%;
}
.employee-container > div .second-half {
  width: 50%;
}

期望的输出：

实际输出：

Answer 1

HTML 更改包括从 Person(3) 中删除“后半部分”div 和从 Person(4) 中删除“前半部分”div。

<div class="employee-container">
  <div class="first-half">
    <p>Person 3 <span>(40)</span></p>
  </div>
</div>
<div class="employee-container">
  <div class="second-half">
    <p>Person 4 <span>(44)</span></p>
  </div>
</div>

将“前半部分”向左浮动，“后半部分”向右浮动（您最初认为 50% 宽度是正确的）

.first-half {
  width: 50%;
  float: left;
}
.second-half {
  width: 50%;
  float: right;
}

将所有元素的 box-sizing 更改为边框（如果您对该属性的作用感到好奇，Paul Irish 有一个很棒的 blog post 就可以了）

html{
    box-sizing: border-box;
}

*, *:before, *:after{
    box-sizing: inherit;
}

Here's a fiddle

Answer 2

从大多数样式中删除子选择器。请注意添加到空 div 以删除背景颜色的类“空白”。您还必须在前半部分和后半部分 div 的 html 之间不留空白，因为 inline-block 会考虑空白。

 <div class="employee-container">
   <div class="full-shift">
     <p>Person 1 <span>(40)</span></p>
   </div>
 </div><div class="employee-container">
  <div class="full-shift">
    <p>Person 2 <span>(40)</span> <span class="fa fa-clock-o"></span></p>   
  </div>
 </div>
 <div class="employee-container">
  <div class="first-half">
    <p>Person 3 <span>(40)</span></p>
  </div><div class="second-half blank"></div>
</div>
<div class="employee-container">
  <div class="first-half blank"></div><div class="second-half">
    <p>Person 4 <span>(44)</span></p>
  </div>
</div>

CSS

.employee-container {
  margin-bottom: 6px;
  margin-top: 6px;
}
.employee-container > div {
  padding: 3px;
  background-color: lightsteelblue;
}
.employee-container  div.full-shift {
  width: 100%;
}
.employee-container  div.first-half {

    display: inline-block;
    width: 50%;
}
.employee-container  div.second-half {

    display: inline-block;
    width: 50%;
}

.employee-container div.blank {
    background: none;
}

Answer 3

试试这个

HTML：

<div class="employee-container">
    <div class="full-shift">
        <p>Person 1 <span>(40)</span></p>
    </div>
</div>
<div class="employee-container">
    <div class="full-shift">
        <p>Person 2 <span>(40)</span> <span class="fa fa-clock-o"></span>   </p>   
</div>
</div>
<div class="employee-container">
    <div class="first-half">
        <p>Person 3 <span>(40)</span></p>
    </div>
</div>
<div class="employee-container">
    <div class="second-half">
        <p>Person 4 <span>(44)</span></p>
    </div>
</div>

CSS：

.employee-container {
     margin-bottom: 6px;
     margin-top: 6px;
}
.employee-container > div {
    padding: 3px ;
    background-color: lightsteelblue;
}
.employee-container .full-shift {
    width: 100%;
}
.employee-container .first-half {
    width: 50%;
    float:left;
    margin-bottom: 6px;
}
.employee-container .second-half {
   width: 50%;
   float:right;
}