0
A
答えて
0
<li>の要素はデフォルトでdisplay: blockです。それらにはfloat: leftを渡してください。あなたはすべて設定されています。各画像は、この場合<div>において、ブロック要素でラップされているので
.wrap {
float: left;
}
+0
こんにちは、あなたの提案に感謝します。私はフロートを左にしようとしましたが、画面が小さくなると画像が大きなボックスに入りません。ページ上の他の画像と同様です。他の誰かがいくつかのdivを使用するように提案しましたが、試しましたが、余白はすべてオフです：https://jsfiddle.net/5cripted/v2qfsnqz/私はちょうど到着し、下のイメージが適切に整列するように見える。 – 5cripted
0
彼らは互いに下に流れています。 divを削除するか、表示値をinline-blockに設定してください。
小さい画像の表示値はそれぞれlist-itemで、垂直リストのように項目を配置します。
インラインブロック
.wrapper {
text-align: left;
}
.wrapper a {
display: inline-block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>表示ブロックと
/* Clearfix */
.wrapper::after {
content: ''
clear: both;
display: table;
}
.wrapper a {
display: block;
float: left;
}
img {
/* Fixes whitespace below each image */
display: block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>フレキシボックス
あなたは、Internet Explorer（< 11）の古いバージョンをサポートする必要がない場合は、これを使用してください。
/* Clearfix */
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper a {
width: 50%;
}
img {
/* Stretch the image for demo purposes */
width: 100%;
/* Fixes whitespace below each image */
display: block;
}<div class="wrapper">
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
<a href="#">
<img src="http://placehold.it/300x200" alt="">
</a>
</div>+0
こんにちは、あなたの提案に感謝します。私はフロートを左にしようとしましたが、画面が小さくなると画像が大きなボックスに入りません。ページ上の他の画像と同様です。他の誰かがいくつかのdivを使用するように提案しましたが、試しましたが、余白はすべてオフです：https://jsfiddle.net/5cripted/v2qfsnqz/私はちょうど到着し、下のイメージが適切に整列するように見える。 – 5cripted
+0
@ 5cripted：いくつかのコードサンプルを追加しました – marvinhagemeister
0
私はあなたのための小さなコードを書かれています。これをチェックして。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
height: auto;
}
div.imagecontainer
{
\t width: 100%;
\t height: auto;
\t
}
div.imagecontainer ul {
\t width: 100%;
\t height: 100%;
\t padding:0;
}
div.imagecontainer ul li{
\t list-style-type: none;
\t width: 20%;
\t height: 200px;
\t float: left;
}
div.imagecontainer ul li img
{
\t width: 100%;
\t height: 100%;
}
</style>
<body>
<div class="imagecontainer">
<ul>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-Blaithin_f3f568d3-849a-4271-a640-b2517965adda.jpg?16480572688008041262"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t <li><img src="https://cdn.shopify.com/s/files/1/1006/9816/files/Home-LisaKay.jpg?13639724066688423445"></li>
\t
</ul>
</div>
<script type="text/javascript">
$(window).resize(function(){
\t //alert("resizing");
var windowWidth = $(window).width();
if(windowWidth < 600)
{
\t $("div.imagecontainer ul li").css({"width":"100%","height":"400px"});
}
else
{
\t $("div.imagecontainer ul li").css({"width":"20%","height":"200px"});
}
});
</script>
</body>
</html>が、私は小さなjqueryのを使用。条件を変更することができ、私はすべてcss ans jsを内部で使用しました。
他のものはwidthとheidhtであり、必要に応じて変更する必要があります（写真の枚数を変更する必要があります）。
これはあなたのニーズに100％合わないと思います。私はブートストラップを使用することをお勧めします。 過去をコピーしてthis.hopeを試してください。これが役に立ちます。
+0
画像がアスペクト比を保持していないようです。彼らは私のために押しつぶされているようです。 – marvinhagemeister
関連する問題
- 1. レスポンシブな画像が反応しない
- 2. レスポンシブな画像ギャラリーでキャプションが正しく切り替わらない
- 3. レスポンシブなWordpressのテーマ画像が修正されました
- 4. レスポンシブな画像とグリッド
- 5. レスポンシブな画像ボタン - スライダー
- 6. レスポンシブな背景画像
- 7. レスポンシブな画像srcset/sizes
- 8. 画像の幅が正しくない
- 9. HTML5キャンバス - 画像が正しく描画されない
- 10. レスポンシブな、純粋なCSSホバー画像ギャラリー
- 11. 長めの高さの画像があるレスポンシブな画像
- 12. バックグラウンド画像が正しく参照されていない
- 13. 画像が正しく中央揃えされていない
- 14. 画像が正しくナビゲートされていない
- 15. 画像が正しくパディングされていない
- 16. メディア画面CSSが正しく画像を表示しない
- 17. カメラの画像が正しく表示されない
- 18. 画像が正しく表示されない、レール？
- 19. アンドロイドタブレットでスプライト画像のレンダリングが正しく行われない
- 20. リストビューアダプターで画像ビューが正しく表示されない
- 21. アンドロイド - ビッグピクチャースタイルの画像が正しく表示されない
- 22. バックグラウンド画像がシミュレータで正しく表示されない
- 23. 画像が正しく表示されない
- 24. jqueryで画像が正しく表示されない
- 25. PYQT背景画像が正しく表示されない
- 26. スクロールバーの画像がAmchartsに正しく表示されない
- 27. LinkedInでAzureのblob画像が正しくレンダリングされない
- 28. jQueryライトボックスでナビゲーション画像が正しく表示されない
- 29. UITabBar背景画像が正しく表示されない
- 30. iPhone Simulatorで画像が正しく表示されない
私のコードはhttps://jsfiddle.net/5cripted/9qyjhjto/2/です。 私はレイアウトをhttps://jsfiddle.net/5cripted/sz4k9pv5/にしようとしていますが、動作させることができません。 – 5cripted