我有一个在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
更多推荐
发布评论