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

从您的大部分样式中删除子选择器。请注意添加到空 div 中的 class 'blank' 以移除背景颜色。您还必须在上半部分和下半部分 div 的 html 之间不留白色 space，因为内联块将白色 space 考虑在内。

 <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 2

HTML 更改包括从 Person(3) 中删除 "second-half" div 和从 Person(4) 中删除 "first-half" 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>

向左浮动 "first-half"，向右浮动 "second-half"（您最初认为 50% 宽度是正确的）

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

将所有元素的框大小更改为边框框（如果您对这个属性的作用感到好奇，Paul Irish 有一个很棒的 blog post）

html{
    box-sizing: border-box;
}

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

Here's a fiddle

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;
}

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

HTML Div list with varying location (right or left or full)

html

css

css-float