具有不同位置（右或左或全部）的HTML Div列表 [英] HTML Div list with varying location (right or left or full)

问题描述

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

Plnkr：

实际输出：

解决方案

HTML更改包括从Person（3）删除后半部分前半部分（4）。

 < div class =employee-container> 
< div class =first-half> 
< p>人3< span>（40）< / span>< / p& 
< / div> 
< / div> 
< div class =employee-container> 
< div class =second-half> 
< p>人4< span>（44）< / span>< / p& 
< / div> 
< / div> 
  

浮动前半部分左边和下半部分右边％width正确）

  .first-half {
 width：50％; 
 float：left; 
} 
 .second-half {
 width：50％; 
 float：right; 
} 
  

更改所有元素的框大小到边框关于此属性的作用，Paul Irish有一个伟大的博文 on it）

  html {
 box-sizing：border-box; 
} 
 
 *，*：before，*：after {
 box-sizing：inherit; 
} 
  

这是一个小提琴

I have a list of objects that display in rows within a div. When they are full width, they work fine. As soon as I try to have the inner objects take up the left or right half of the parent, they cause all kinds of problems. Below is how I want them to appear, and how they actually appear. How do I achieve this layout with html/css? I've tried floating elements (which tends to mess up the parent list) and inline-block with no luck.

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

Desired output:

Actual output:

解决方案

HTML changes include removing the "second-half" div from Person(3) and the "first-half" div from Person(4).

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

Float "first-half" left, and "second-half" right (Your original thought of 50% width was correct)

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

Change box-sizing to border box for all elements (if you're curious about what this property does, Paul Irish has a great blog post on it)

html{
    box-sizing: border-box;
}

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

Here's a fiddle

这篇关于具有不同位置（右或左或全部）的HTML Div列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！