如何使用 CSS 在内联块中换行?

发布于 2024-12-15 00:45:21 字数 1025 浏览 1 评论 0原文

我有一个简单的 HTML 结构(jsfiddle):

<li>
    <div class="buttons">
        <a href="done"><img src="done.png"></a>
    </div>
    <div class="owners">
        Даня Абрамов и Саша Васильев
    </div>
    <div class="text">
        трали-вали трали-вали трали-вали трали-вали
    </div>
</li>

按钮ownerstext 具有 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:

enter image description here

However, as the text grows, inline-block elements extend and eventually fall over the line:

enter image description here

This is ugly, and I would like to avoid that.
What I want to achieve instead is this:

enter image description here

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

滥情空心 2024-12-22 00:45:21

如果您使用浮动而不是 display: inline-block,则可以实现您想要的确切结果。

参见: http://jsfiddle.net/thirtydot/CatuS/

li {
    overflow: hidden;
}
.buttons, .owners {
    float: left;
}
.text {
    overflow: hidden;
    padding-left: 4px;
}

The exact result you desire can be achieved if you use floats instead of display: inline-block.

See: http://jsfiddle.net/thirtydot/CatuS/

li {
    overflow: hidden;
}
.buttons, .owners {
    float: left;
}
.text {
    overflow: hidden;
    padding-left: 4px;
}
暮年慕年 2024-12-22 00:45:21

您必须指定一些带有百分比的 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% -->

You have to specify some max-width with percentage:

<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% -->
累赘 2024-12-22 00:45:21

如果您有浏览器支持,有一个非常好的 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>

There is a very nice flexbox solution if you have the browser support:

/* 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>

放赐 2024-12-22 00:45:21

我认为你需要设置不同显示模式的最大宽度。

li {overflow:hidden;}
li div { float:left; }
.button{ max-width: 10%;}
.owners{ max-width: 20%;}
.text{ max-width: 70%;}

在此处查看新结果

顺便说一句,如果您使用 inline-block,则所有者部分不会保持领先。

我修改了代码以满足您的要求。 :)

仅供参考,li {overflow:hidden;} 是一种使容器包含其浮动子项的方法。

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%;}

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文