具有不同位置的HTML Div列表（右侧或左侧或完整）(HTML Div list with varying location (right or left or full))

我有一个在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%; }

期望的输出：

实际产量：

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更改包括从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; }

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

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

这是一个小提琴

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

更多推荐