Html 如何使用 CSS 在行内块中换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8114367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wrap lines in an inline-block with CSS?
提问by Dan Abramov
I have a simple HTML structure (jsfiddle):
我有一个简单的 HTML 结构（jsfiddle）：
<li>
<div class="buttons">
<a href="done"><img src="done.png"></a>
</div>
<div class="owners">
Даня Абрамов и Саша Васильев
</div>
<div class="text">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
buttons, ownersand texthave display: inline-block.
buttons，owners并且text有display: inline-block。
This looks fine when textis fairly small:
当text相当小时这看起来不错：
However, as the text grows, inline-blockelements extend and eventually fall over the line:
但是，随着文本的增长，inline-block元素会扩展并最终落在该行上：
This is ugly, and I would like to avoid that.
What I want to achieve instead is this:
这很丑陋，我想避免这种情况。
我想要实现的是：
When the text is too large to fit inside the element, I want it to be wrapped by lines.
I tried setting float: lefton the elements, but couldn't get it working.
当文本太大而无法放入元素时，我希望它用线条包裹。
我尝试float: left对元素进行设置，但无法使其正常工作。
What's the proper way to do this with HTML and CSS (no tables)?
使用 HTML 和 CSS（无表格）执行此操作的正确方法是什么？
采纳答案by thirtydot
The exact result you desire can be achieved if you use floats instead of display: inline-block.
如果您使用浮点数而不是display: inline-block.
See:http://jsfiddle.net/thirtydot/CatuS/
见：http : //jsfiddle.net/thirtydot/CatuS/
li {
overflow: hidden;
}
.buttons, .owners {
float: left;
}
.text {
overflow: hidden;
padding-left: 4px;
}
回答by MatTheCat
You have to specify some max-widthwith percentage:
你必须max-width用百分比指定一些：
<li>
<div class="buttons" style="max-width:10%;">
<a href="done"><img src="done.png"></a>
</div>
<div class="owners" style="max-width:30%;">
Даня Абрамов и Саша Васильев
</div>
<div class="text" style="max-width:60%;">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
<!-- 10+30+60 = 100% -->
回答by Frank Tan
There is a very nice flexbox solution if you have the browser support:
如果你有浏览器支持，有一个非常好的 flexbox 解决方案：
/* flexbox additions */
ul li {
display: flex;
}
.buttons {
flex-shrink: 0;
}
.owners {
flex-shrink: 0;
margin-right: 6px;
}
/* original CSS (inline-block is technically no longer necessary) */
.buttons {
display: inline-block;
}
.owners {
display: inline-block;
}
.text {
display: inline-block;
}
/* the rest is visual styling */
ul li {
line-height: 1.5em;
padding: 12px 8px 12px 8px;
margin-bottom: 12px;
margin-top: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
font-size: 15px;
background-color: #DBEAFF;
min-height: 23px;
}
.buttons {
min-width: 13px;
vertical-align: top;
margin-top: 3px;
margin-bottom: -3px;
}
.buttons a {
padding: 13px 9px 5px 9px;
}<ul>
<li>
<div class="buttons">
<a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
</div>
<div class="owners">
<a>Даня Абрамов</a>
</div>
<div class="text">short text
</div>
</li>
<li>
<div class="buttons">
<a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
</div>
<div class="owners">
<a>Даня Абрамов</a>
</div>
<div class="text">longer text longer text longer text longer text longer text longer text longer text longer text longer text
</div>
</li>
<li>
<div class="buttons">
<a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
</div>
<div class="owners">
<a>Даня Абрамов</a> и <a>Саша Васильев</a>
</div>
<div class="text">
longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text
longer text longer text longer text longer text longer text longer text
</div>
</li>
<li>
<div class="buttons">
<a href="done"><img src="http://clstr.org/static/images/tick.png"></a>
</div>
<div class="owners">
<a>Даня Абрамов</a> и <a>Саша Васильев</a>
</div>
<div class="text">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
</ul>回答by maxisam
I think you need to set max-width with different display mode.
我认为您需要使用不同的显示模式设置最大宽度。
li {overflow:hidden;}
li div { float:left; }
.button{ max-width: 10%;}
.owners{ max-width: 20%;}
.text{ max-width: 70%;}
BTW, if you use inline-block, the owners part won't stay on top.
顺便说一句，如果您使用内联块，所有者部分将不会保持领先。
I modified the code to fit your requirement. :)
我修改了代码以满足您的要求。:)
FYI, li {overflow:hidden;}is a way to make a container to encompass its floated children.
仅供参考，li {overflow:hidden;}是一种制作容器以包含其浮动子项的方法。
