■ ■ ■ ■ ■
■ ■ ■ ■ ■
■ ■ ■ ■ ■
このように、複数の画像を並ばせて表示したいのですが、
画像の横サイズがバラバラなため、どうしても一番右側がガタガタになってしまいます。
やりたいことは、大枠の左右の幅を固定し、画像の間の空白を均等にしたい。
そして、画像の下に画像名を左揃えで入れたい。
画像の横サイズはバラバラです。(縦サイズは全て同じ)
1行に入る画像の枚数も同じではありません。
テーブルを使ってやってみましたが、うまくいきませんでした。
CSSを使えばできるのでしょうか?
色々と勉強しながらやっていますがまだまだ初心者で、どうにも知識が足りません。
どなたか解決方法を教えて下さい。
よろしくお願いします!
No.1ベストアンサー
- 回答日時:
古いブラウザには無効ですから、それはそれで仕方ないとして・・
画像とその説明ですから、シンプルなul(順不同リスト)でマークアップされているでしょうから。
<div class="section">
<h2>見出し</h2>
<div class="album">
<ul>
<li><img src="./images/photo/01.jpg" width="240" height="180" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/02.jpg" width="270" height="360" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/03.jpg" width="200" height="200" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/04.jpg" width="240" height="180" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/05.jpg" width="240" height="180" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/06.jpg" width="160" height="120" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/07.jpg" width="320" height="240" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/08.jpg" width="320" height="240" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/09.jpg" width="300" height="300" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/10.jpg" width="240" height="320" alt="">
<p>画像の説明</p>
</li>
<li><img src="./images/photo/11.jpg" width="320" height="240" alt="">
<p>画像の説明</p>
</li>
</ul>
</div>
</div>
だとしたら、
div.album{width:90%;margin:0 auto;}
div.album ul,div.album ul li{list-style-type:none;}
div.album ul{text-align:center;text-align:justify;}
div.album ul li{display:inline-block;text-align:left;}
で良いかと・・。
ありがとうございました。
CSSの基本的なことがちゃんと理解できておらず、なかなか苦戦していましたが、希望通りの形になりました。
もっと勉強します。感謝です!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Excel(エクセル) ある数値に対して、値を返す数式についてです 2 2022/09/13 22:06
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Excel(エクセル) Excel 毎日手作業で時間がかかって、泣きたいです、、、VBAのプロの方、助けてください。。。 3 2022/10/25 04:26
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- その他(Microsoft Office) 複数の写真を1枚に印刷 5 2023/05/05 22:41
- Instagram Instagramの投稿を、16:9の画像サイズにして、その画像真ん中の、自分のページを見たときの各 0 2023/08/08 00:17
- Excel(エクセル) エクセル、画像ファイル名の書かれたセル(複数個所)に画像を一括で表示させる方法 1 2023/04/19 00:19
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
css 横並びのナビゲーションバ...
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
ポップアップメニューの作成方...
-
html/cssの、navを2段にする...
-
CSSでの<ul><li>を使った改行設定
-
<table>の高さ固定。情報増加時...
-
リストの数字のフォントサイズ...
-
リストを2つに分割して、それぞ...
-
バーナーヘッダーを固定する方法
-
ol、liをスタイルシートで中央寄せ
-
計算式や注意書きなどの記述は...
-
タイトルの横にサブタイトルが並ぶ
-
文法チェックの<A>と</A>の間が...
-
CSS「table-cell」で横並びにし...
-
ボタンを横に並べて表示させる方法
-
スタイルシートで更新情報をつ...
-
2要素ずつcssを適用する疑似ク...
-
テーブル内のプルダウンの下に...
-
Webのコーディングについての質...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報