インラインブロックのラッピングを防止するが、コンテンツのラップを許可する

これまで私はこのレイアウトを持っています：

    
    
  • 
    
  •

私は ul のラッピングを開始から停止することができました。ただし、2番目の li のコンテンツは画面から引き続き表示されます。その親要素などをオーバーラップする

最初の li とは異なり、スラックを取り、幅が動的になるように2番目の li が必要です。そして、2番目の li の中に折り返すテキストが必要です。

助けてくれてありがとう。

9
追加された
ビュー: 8
源
ro ru fr es pt de hi bn ar tr uk
最初のリスト項目にイメージがあり、2番目のリスト項目にテキストがあります。だから、私は2番目のリスト項目の折り返しだけを心配しています。
追加された 著者 HGPB, 源
最初のリスト項目の折り返しを無効にするだけですか？リストコンテナ全体ではなく、 white-space：nowrap を設定するだけで済みます。
追加された 著者 unclenorton, 源

3 答え

li {display：table;}はあなたの友人です。

p.s.インラインスタイルを削除することを忘れないでください！

9
追加された
源

li 要素で white-space：normal を試してみてください。

white-space is inherited by default so they received nowrap from the ul.

div が次の目的に適していると思われるレイアウトの目的で、 ul 

<div class="Item">
 <div class="ImageContainer">/></div>
 <div class=Text text text text text</div>
</div>

.Item {
 width: 200px;
 overflow: auto;
}

.ImageContainer {
 float: left;
 width: 40%;
}

.TextContainer {
 float: left;
 width: 60%;
}
5
追加された
源
@Bazzzいいえ、それは背景画像ではありません。それは前景のイメージです。それを背景イメージにすることは正しいかもしれませんが、それはハックであり、意味的に間違っています。
追加された 著者 ma11hew28, 源
ありがとう - それは固定幅を追加する場合、私のためにのみ働くようです。私は本当に第2世代に幅を追加したくありません。
追加された 著者 HGPB, 源
最初のliは、2番目のliがwrapable textを保持するイメージを保持します。 2番目のliは画面の解像度に応じてサイズが大きくなり縮小することができます。
追加された 著者 HGPB, 源
あなたはそれからあなたが望むものを特定できますか？なぜなら、リストを作るのではなく、レイアウトの目的で ul を使用している可能性があるからです。もしそうなら、おそらくいくつかの浮動する div が仕事をより良くするかもしれません。
追加された 著者 Bazzz, 源
それは、背景イメージを持つdivのように聞こえて、私にパディングを残しました。これを考えてみましょう： <div id = "x">テキストテキストテキスト</div> と #x {padding-left：200px; background-image：url（myimage.jpg）;}
追加された 著者 Bazzz, 源

あなたが実際にテーブルを使いたいかもしれないように思えます。

それ以外の場合は、イメージの幅を知っていれば、それを左に浮かして、次の要素にイメージの幅以上の左余白を与えます。

例えば：

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> 

article > img {
  float: left;
  height: 80px;
  width: 80px;
}
article > div {
  margin-left: 90px;
}

  
  <div>
    
Matt Di Pasquale

    
I know the width of the image is 80px, so I floated it left and gave the div a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.

  </div>
</div> </div>

0
追加された
源