レスポンシブデザインのために、ウィンドウサイズを変更しても
デザインが崩れないようにしたいです。
以下のように5つの画像を横並びにしたものを表示しております。
これらをウィンドウサイズを変更しても画像を常に横に整列したいです。
現状ですと、2番目の画像で示すように、ウィンドウサイズを変更した場合に
縦に並んでしまいます。
基本的な内容で申し訳ありませんが、ソースを添付いたしますので
解決方法をご教授いただけるとありがたく思います。
よろしくお願いいたします。
使用している画像
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name=viewport content="width=device-width, initial-scale=1"> 6 7<title>test</title> 8<link rel="stylesheet" type="text/css" href="common.css" /> 9</head> 10 11<body> 12 13<div class="outer"> 14 <div id="title">画像横固定テスト</div> 15 16 <div class="main"> 17 <ul id = "switches"style="list-style:none"> 18 <li style="float:left "> 19 <img id="1sei" src="./imgs/saisei.jpg" ></li> 20 <li style="float:left"> 21 <img id="2sei" src="./imgs/saisei.jpg" width="105" height="115" border="0"></li> 22 <li style="float:left"> 23 <img id="3sei" src="./imgs/saisei.jpg" width="105" height="115" border="0"></li> 24 <li style="float:left"> 25 <img id="4sei" src="./imgs/saisei.jpg" width="105" height="115" border="0"></li> 26 <li style="float:left"> 27 <img id="keisei" src="./imgs/saisei.jpg" width="105" height="115" border="0"></li> 28 </ul> 29 </div> 30</body> 31</html> 32
CSS
1@charset "utf-8"; 2 3#switches img{ 4width:100%; 5max-width: 105px; 6height: 100%; 7} 8
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/22 20:57