如何使用 CSS 在内联块中换行?
我有一个简单的 HTML 结构(jsfiddle):
<li>
<div class="buttons">
<a href="done"><img src="done.png"></a>
</div>
<div class="owners">
Даня Абрамов и Саша Васильев
</div>
<div class="text">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
按钮
、owners
和 text
具有 display: inline-block
。
当 text
相当小时,这看起来很好:
但是,随着文本的增长, inline-block
元素延伸并最终越过线条:
这是丑陋,我想避免那个。
我想要实现的是:
当文本太大而无法容纳元素时,我希望它被线条包裹起来。
我尝试在元素上设置 float: left
,但无法使其工作。
使用 HTML 和 CSS(无表格)执行此操作的正确方法是什么?
I have a simple HTML structure (jsfiddle):
<li>
<div class="buttons">
<a href="done"><img src="done.png"></a>
</div>
<div class="owners">
Даня Абрамов и Саша Васильев
</div>
<div class="text">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
buttons
, owners
and text
have display: inline-block
.
This looks fine when text
is fairly small:
However, as the text grows, inline-block
elements extend and eventually fall over the line:
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: left
on the elements, but couldn't get it working.
What's the proper way to do this with HTML and CSS (no tables)?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
如果您使用浮动而不是
display: inline-block
,则可以实现您想要的确切结果。参见: http://jsfiddle.net/thirtydot/CatuS/
The exact result you desire can be achieved if you use floats instead of
display: inline-block
.See: http://jsfiddle.net/thirtydot/CatuS/
您必须指定一些带有百分比的
max-width
:You have to specify some
max-width
with percentage:如果您有浏览器支持,有一个非常好的 Flexbox 解决方案:
There is a very nice flexbox solution if you have the browser support:
我认为你需要设置不同显示模式的最大宽度。
在此处查看新结果
顺便说一句,如果您使用 inline-block,则所有者部分不会保持领先。
我修改了代码以满足您的要求。 :)
仅供参考,
li {overflow:hidden;}
是一种使容器包含其浮动子项的方法。I think you need to set max-width with different display mode.
See the new result here
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.