web-dev-qa-db-ja.com

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>

buttons、ownersおよびtextにはdisplay: inline-blockがあります。

textがかなり小さい場合、これは問題ないように見えます。

enter image description here

ただし、テキストが大きくなると、inline-block要素が拡張され、最終的に次の行に分類されます。

enter image description here

これは醜いです、そして私はそれを避けたいです。
代わりに達成したいのはこれです：

enter image description here

テキストが大きすぎて要素内に収まらない場合は、行で囲む必要があります。
要素にfloat: leftを設定しようとしましたが、機能しませんでした。

HTMLとCSS（テーブルなし）でこれを行う適切な方法は何ですか？

htmlcss-floatcss
23
Dan Abramov

display: inline-blockの代わりにfloatを使用すると、希望どおりの結果を得ることができます。

参照：http://jsfiddle.net/thirtydot/CatuS/

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

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% -->
4
MatTheCat

ブラウザをサポートしている場合は、非常に優れた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>
3
Frank Tan

表示モードを変えて最大幅を設定する必要があると思います。

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

ここで新しい結果を参照してください

ところで、インラインブロックを使用すると、所有者の部分がトップに留まりません。

要件に合うようにコードを変更しました。 :)

ご参考までに、 li {overflow:hidden;}は、フローティングされた子を含むコンテナを作成する方法です。

2
maxisam