CSS：含まれていないイメージで要素の幅を定義しないJS

Question

それは縫い目です。この問題ではJSを使用しないと解決策が見つかりません： 画像とその下に小さなテキストを含む水平スライダーを作成する必要があります。すべての画像を同じ高さにリサイズし、幅に合わせてサイズを変更する必要があります。画像の下には、画像が幅が狭い場合に複数の行に折り返すテキストがあります。 問題：周囲の要素の幅をイメージの幅に制限することに苦労しています（イメージの幅は分かりません）。 すべての画像が間隔を置かずに隣り合っていることが予想されます（Google画像検索に似ています）。

私は外側の要素に白い空白を使用しています。内側のインラインブロックを表示すると、水平方向のスクロールができます。私もフレックスで試しましたが、違いはありません。 https://jsfiddle.net/lobin/awbL80st/

`<ul> 
    <li> 
    <div class="pic"> 
     <img src="(url)"> 
    </div> 
    <div class="text"> 
     A longer text which should wrap to multiple lines. 
    </div> 
    </li> 
<li> 
...` 

CSSが

ul { 
    list-style:none; 
    white-space: nowrap; 
    margin:0; 
    padding:0; 
    overflow-x:scroll; 
    width:500px; 
    height:240px; 
} 
li { 
    margin:0; 
    padding:0; 
    display:inline-block; 
} 
.pic { 
    height:150px; 
} 
img { 
    height:100%; 
    width:auto; 
} 
.text { 
    white-space:normal; 
}` 

任意のアイデアです：

は、ここで私が持っているもののフィドルですか？

EDIT：写真の下側に は、画像の幅に対する各PICの折り返しのためのテキストのようになります。 期待される結果は、このようなものです。

Answer 1

liをdisplay:table-cell;とし、一部のJSコードを追加して画像のwidthを取得し、テキストに設定します。

$(document).ready(function(){ 
 
    var a=$("img"); 
 
    var b=$('.text'); 
 
    for(var i=0;i<a.length;i++){ 
 
    \t $(b[i]).css("width",a[i].width); 
 
    } 
 
});

ul { 
 
    list-style:none; 
 
    white-space: nowrap; 
 
    margin:0; 
 
    padding:0; 
 
    overflow-x:scroll; 
 
    width:500px; 
 
    height:240px; 
 
} 
 
li { 
 
    display:table-cell; 
 
    width:auto; 
 
    padding-right:10px; 
 
} 
 
.pic { 
 
    height:100px; 
 
    width:auto; 
 
} 
 
img { 
 
    height:100%; 
 

 
} 
 
.text { 
 
    white-space:normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div class="pic"> 
 
     <img src="https://cdn.pixabay.com/photo/2017/05/14/14/24/grass-2312139__340.jpg"> 
 
    </div> 
 
    <div class="text"> 
 
A longer text which should wrap to multiple lines. 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="pic"> 
 
     <img src="https://cdn.pixabay.com/photo/2017/06/14/23/15/soap-bubble-2403673__340.jpg"> 
 
    </div> 
 
    <div class="text"> 
 
A longer text which should wrap to multiple lines. 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="pic"> 
 
     <img src="https://cdn.pixabay.com/photo/2017/05/04/19/32/sculpture-2284945__340.jpg"> 
 
    </div> 
 
    <div class="text"> 
 
A longer text which should wrap to multiple lines. 
 
    </div> 
 
    </li> 
 
</ul>

javascriptをせずに別のオプションがliのdisplay:table-cell;プロパティを設定して、それが最大幅画像の幅にすべてのセルの幅を設定します。

あなたに合ったらこれを試してください。

ul { 
 
    list-style:none; 
 
    white-space: nowrap; 
 
    margin:0; 
 
    padding:0; 
 
    overflow-x:scroll; 
 
    width:500px; 
 
    height:240px; 
 
} 
 
li { 
 
    display:table-cell; 
 
    width:auto; 
 
    padding-right:10px; 
 
} 
 
.pic { 
 
    height:100px; 
 
    width:auto; 
 
} 
 
img { 
 
    height:100%; 
 

 
} 
 
.text { 
 
    white-space:normal; 
 
}

 
<ul> 
 
    <li> 
 
    <div class="pic"> 
 
     <img src="https://cdn.pixabay.com/photo/2017/05/14/14/24/grass-2312139__340.jpg"> 
 
    </div> 
 
    <div class="text"> 
 
A longer text which should wrap to multiple lines. 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="pic"> 
 
     <img src="https://cdn.pixabay.com/photo/2017/06/14/23/15/soap-bubble-2403673__340.jpg"> 
 
    </div> 
 
    <div class="text"> 
 
A longer text which should wrap to multiple lines. 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="pic"> 
 
     <img src="https://cdn.pixabay.com/photo/2017/05/04/19/32/sculpture-2284945__340.jpg"> 
 
    </div> 
 
    <div class="text"> 
 
A longer text which should wrap to multiple lines. 
 
    </div> 
 
    </li> 
 
</ul>