こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

解決済みの質問

cssの初歩的な質問

初歩的な質問で申し訳ないのですが、以下の画像のように画像を並べたいのですがうまく並べることができせん。
ulで画像たちを囲いmax-widthで最大幅を決めて画面が狭まるほど画像を小さくし、並べるためにfloat:leftをかけてはいるのですが下記の「こうなる」のようになってしまいます。
うまくやるにはどうしたらいいのでしょうか?
よろしくお願いします。

//簡単に書いたコード(実際はid名などを書いてます)
html
<ul>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
</ul>

css
ul{
overflow:hidden;
max-width:310px;
margin:20px auto;
}
ul li{
float:left;
width:48%;
}
ul li img{
width:100%;
}
ul li:nth-child(even){
padding-left:10px;
}
ul li:last-child{
width:100%;
}

投稿日時 - 2016-01-20 20:28:32

QNo.9114431

困ってます

質問者が選んだベストアンサー

よくある症状だな、と思ってこちらでも試してみているのですが
貼られている範囲のcss設定では、同じようにならないですね。

再現できるようにもう少し詳しいものが欲しいかなと思ったりします。

今見えている範囲で予想しますと

・liタグの中身の画像が、liタグの高さより大きくて、⓷が⓵に引っかかって、画面の左端まで回り込まない
・clearの設定が、書かれている範囲の外にあって、これが悪さをしている

この辺りのどちらかではないかな、と思ったりします。
というかおそらく上の方でしょうね。

回答遅れてすいませんでした。
頑張ってください。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Skyscraper</title>
<style>
ul {
list-style-type:none;
overflow:hidden;
max-width:310px;
margin:20px auto;
}
ul li {
clear:none;
float:left;
width:48%;
}
ul li img {
width:100%;
}
ul li:nth-child(even){
padding-left:10px;
}
ul li:last-child {
width:100%;
}
</style>


</head>
<body>
<ul>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
<li><img src="#"></li>
</ul>
</body>
</html>

投稿日時 - 2016-01-22 11:21:35

お礼

liに高さを指定したらできました!
ありがとうございます!

投稿日時 - 2016-01-22 21:04:03

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(1)

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-