代码之家 › 专栏 › 技术社区 › Ryan Langton

具有不同位置的HTML Div列表(右侧、左侧或完整)

css-float css html

Ryan Langton · 技术社区 · 8 年前

我有一个在div中以行显示的对象列表。当它们是全宽时,它们工作正常。一旦我试图让内部对象占据父对象的左半部或右半部,它们就会导致各种问题。下面是我希望他们如何出现,以及他们实际上如何出现。如何使用html/css实现此布局?我尝试过浮动元素(这会把父列表搞砸)和内联块,但都没有成功。

Plnker公司: 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%;
}

期望输出:

实际产量:

3 回复 | 直到 8 年前

Tony Scialo 8 年前

HTML更改包括从Person(3)中删除“后半部分”div,从Person中删除“前半部分”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;
}

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

html{
    box-sizing: border-box;
}

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

Here's a fiddle

Fergal Andrews 8 年前

从大多数样式中删除子选择器。请注意,添加到空div中的类“blank”删除了背景色。您还必须在前半部分和后半部分div的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 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;
}

Annie Chen - MSFT 8 年前

试试这个

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