使用框模型在其父div中包含项 [英] Using box model to contain items within its parent div
问题描述
使用以下HTML和CSS3规则，我想确保遵守以下条件：
我有所有的标准工作除了项目1
孩子超过他们的父的宽度。
- li项目不能超过父级宽度，即400px
- img，标签和货币内容必须在其范围内垂直居中
- 货币不应包装，
- 货币应始终尽可能靠近
标签范围显示。 - 标签文字应夹在两行，且省略号显示超过2行。
它应该类似于：
但是，看起来像这样：
有任何想法吗？
************* ****** JS Fiddle示例 ********** **************
< ul>
< li>
< span class =img>< / span>
< span class =label> Acclaim< / span>
< span class =currency>（USD 50）< / span>
< / li>
< li>
< span class =img>< / span>
< span class =label> Acclaim 1 11 111 1111 11111< / span>
< span class =currency>（USD 50）< / span>
< / li>
< li>
< span class =img>< / span>
< span class =label> Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666< / span>
< span class =currency>（USD 50）< / span>
< / li>
< / ul>
ul {
width：400px;
background-color：yellow;
padding：0;
margin：0;
}
li {
display：-webkit-box;
padding-right：50px;
}
.label {
display：-webkit-box;
-webkit-box-orient：vertical;
-webkit-box-pack：center;
-webkit-line-clamp：2;
text-overflow：ellipsis;
overflow：hidden;
空格：正常;
word-wrap：break-word;
line-height：1.3em;
margin-right：0.2em;
background-color：pink;
}
.currency {
display：-webkit-box;
-webkit-box-orient：vertical;
-webkit-box-pack：center;
white-space：nowrap;
background-color：lightgreen;
}
.img {
display：block;
width：40px;
height：40px;
margin-right：0.1em;
background-image：url（'data：image / png; base64，iVBOR ...）;
}
工作没有JavaScript。但是，它只适用于更现代的浏览器，包括Chrome和Opera。它不会在Safari中工作。它将在Firefox更新到最新规范后工作。我可能可以让它工作在IE10，但我必须进一步研究。省略号只适用于Chrome / Safari，因为它是供应商特有的。
演示在 http://jsfiddle.net/uLm92/1/
首先，我们要将li作为flexbox容器并将其设置为400px，因此flex项目将尝试适合该大小（稍后更多）：
li {
/ *将里面的所有项目作为flex项目* /
显示：-webkit-flex;
display：flex;
height：40px;
max-width：400px;
}
现在子项目是flex项目，是设置图像和价格不弯曲。对于价格，我们知道它总是40xp宽，所以我设置以下：
.img {
width：40px;
height：40px;
-webkit-flex-basis：40px;
flex-basis：40px;
-webkit-flex-shrink：0;
flex-shrink：0;
}
这说明首选id为40px， p>
然后我们还要告诉价格永不缩水，并且还将匿名框（内容）居中：
.currency {
/ *使匿名框垂直居中* /
显示：-webkit-flex;
display：flex;
-webkit-align-items：center;
align-items：center;
/ *确保它不会收缩* /
-webkit-flex-shrink：0;
flex-shrink：0;
}
最后，我们还要将标签文本居中。因为你需要省略号黑客，我使用了WebKit的旧Flexbox语法。如果不使用旧的flexbox，线钳位属性不起作用：
.label {
/ *需要使用旧的flexbox的线夹工作
它是一个*可怕的hack * * /
显示：-webkit-box;
display：flex;
-webkit-line-clamp：2;
-webkit-box-orient：vertical;
overflow：hidden;
text-overflow：ellipsis;
-webkit-box-pack：center;
align-items：center;
}
将永远不会收缩，.label元素是唯一可以，因此如果没有剩余空间，它的大小减少。
Using the following HTML and CSS3 rules, I'm trying to make sure that the following criteria are adhered to:
I have all of the criteria working except for item 1 where the children are exceeding their parent's width. Question: How to keep children within their parent?
- li items cannot exceed their parent width i.e. 400px
- img, label, and currency content must be centred vertically within their span
- currency should not wrap and should always be displayed in full
- currency should always be displayed as close as possible to the label span.
- the label text should be clamped at 2 lines with ellipsis displayed where it exceeds 2 lines.
Note: Only needs to work in Chrome and Safari webkit-based browsers.
It should look like:
However, it looks like this at the moment:
Any ideas?
********************* JS Fiddle example ************************
<ul>
<li>
<span class="img"></span>
<span class="label">Acclaim</span>
<span class="currency">(USD 50)</span>
</li>
<li>
<span class="img"></span>
<span class="label">Acclaim 1 11 111 1111 11111</span>
<span class="currency">(USD 50)</span>
</li>
<li>
<span class="img"></span>
<span class="label">Acclaim 1 11 111 1111 11111 2 22222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 5 55 555 5555 55555 6 66 666 6666 66666</span>
<span class="currency">(USD 50)</span>
</li>
</ul>
ul {
width: 400px;
background-color: yellow;
padding: 0;
margin: 0;
}
li {
display: -webkit-box;
padding-right: 50px;
}
.label {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
word-wrap: break-word;
line-height: 1.3em;
margin-right: 0.2em;
background-color: pink;
}
.currency {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
white-space: nowrap;
background-color: lightgreen;
}
.img {
display: block;
width: 40px;
height: 40px;
margin-right: 0.1em;
background-image:url('data:image/png;base64,iVBOR...);
}
I’ve solved this to work without JavaScript. However, it only works in more modern browsers, including Chrome and Opera. It will not work in Safari. It will work in Firefox once it updates to the latest spec. I can probably get it to work in IE10, but I have to look into that more. The ellipsis only works in Chrome/Safari as it is vendor specific.
The demo is at http://jsfiddle.net/uLm92/1/
First of all we want to make the li as a flexbox container and set it to 400px, so the flex items will try to fit that size (more on that later):
li {
/* make all items inside li as flex items */
display: -webkit-flex;
display: flex;
height: 40px;
max-width: 400px;
}
Now the child items are flex items, the key to getting the label to fit is setting the image and the price to not flex. For the price, we know it wants to always be 40xp wide, so I set the following:
.img {
width: 40px;
height: 40px;
-webkit-flex-basis: 40px;
flex-basis: 40px;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
This says that the preferred with id 40px and never make it smaller.
Then we want to also tell the price to never shrink, and to also centre the anonymous box (the content):
.currency {
/* make anonymous box vertically centred */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
/* make sure it never shrinks */
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
Lastly, we want to also center the label text. As you need the ellipsis hack, I've used the old Flexbox syntax for WebKit. Without using old flexbox, the line-clamp property does not work:
.label {
/* need to use old flexbox for line-clamp to work
it is a *horrible hack* */
display: -webkit-box;
display: flex;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow : hidden;
text-overflow: ellipsis;
-webkit-box-pack: center;
align-items: center;
}
As the other two items will never shrink, the .label element is the only one that can, so it reduces in size if there is no space left.
这篇关于使用框模型在其父div中包含项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
