レイアウトの質問

下記のリンクをご確認頂きたいのですが、
サイトの右側のメインページに商品画像を４つ×2列にしたいのですが、左下の一つだけズレた位置に配置されてしまっております。これを修正するにはそうすればよろしいでしょうか？

＜画像URL＞
https://gyazo.com/e222bc8fe004953853a9a764aaf1fab3

HTML
1コード

<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css">-->  <link rel="stylesheet" href="../style/mainbox-style.css"/> <script src="../js/modernizr-transitions.js"></script> <meta charset="utf-8"> <link rel="stylesheet" href="../style/style.css" type="text/css"> <title>PRESENT ME</title> </head> <body id="yellow"> <div id="leftbox"> <h1>PRESENT ME</h1> <dl>  <dd><a href="/ドットインストール/login.php">ログイン</a><br> <a><a href="/ドットインストール/index.php">新規登録</a></dd> </dl> <div id="menu"> <dl id="myPage"><dt>マイページ</dt> <dd> <img src="images/photo11.png"/> <ul> <li><a href="#">お気に入り</a></li> <li><a href="#">ともだちを検索</a></li> <li><a href="#">ともだちのお気に入り</a></li> <li><a href="#">アカウント情報</a></li> </ul></dd></dl> <ul id="menuLinks"> <li><a href="#"><strong>プレゼント診断</storong></a></li> </ul> </div> </div> <div id="mainbox"> <h3> ITEM LINEUP</h3> <div class="main_text"> <body class="homepage"> <section id="content"> <div id="container" class="transitions-enabled clearfix">

<div class="item link">
<input type="checkbox">check!

<!--<img src="images/photo01.jpg" width="180" height="278">-->
</div>

<div class="item link">
<input type="checkbox">check!

</div>
 
<div class="item link">
<input type="checkbox">check!
<!--<img src="images/photo03.jpg" width="180" height="124"><br>-->
<!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
</div>
 
<div class="item link">
<input type="checkbox">check!
<!--<img src="images/photo04.jpg" width="180" height="120"><br>-->
 <!--文字数制限のため、アフリエイト画像のリンクを貼っておりましたが、削除しました。-->
 </div>

<div class="item link">
<input type="checkbox">check!
<!--<img src="images/photo05.jpg" width="180" height="120"><br>-->

</div> <div class="item link"> <input type="checkbox">check!  <div class="item link"> <input type="checkbox">check! </div>  <div class="item link"> <input type="checkbox">check!  </div> <div class="item link">  </div> <div class="item link">  </div> <div class="item link"> <input type="checkbox">check!  </div> <div class="item link"> <input type="checkbox">check!  </div> <script src="../js/jquery-1.7.1.min.js"></script> <script src="../js/jquery.masonry.min.js"></script> <script> $(function(){ var $container = $('#container'); $container.masonry({ itemSelector: '.item', columnWidth: 350, isAnimated: !Modernizr.csstransitions }); // dynamically load sites using Masonry from Zootool $.getJSON('http://zootool.com/api/users/items/?username=desandro' + '&apikey=8b604e5d4841c2cd976241dd90d319d7' + '&tag=bestofmasonry&callback=?') .error(ajaxError) .success(function( data ){}); }); </script> </section> </div> </body> </html>

CSS
1コード

/**** Base styles ****/
@charset "utf-8";

.item link button{
font-size: 1px
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
html {
overflow-y: scroll;
}
body {
font: 13px 'Helvetica Neue', Arial, sans-serif;
color: #222;
line-height: 1.6em;
background-color: #F7F5F4;
}
a {
color: #A2C;
text-decoration: none;
}
a:hover {
color: #D26;
}
a:active {
background: hsla( 0, 100%, 100%, 0.5 );
}
h1, h2 {
font-weight: 100;
line-height: 1.6em;
margin-bottom: 0.6em;
}
h1 {
font-size: 28px;
color: #366C81;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
text-decoration: underline;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 17px;
font-weight: bold;
}
h3, p, ul, ol, pre, dl {
margin-bottom: 1.0em;
}
strong {
font-weight: bold;
}

/* screens smaller than 640 */
@media screen and (max-width: 640px) {
#content {
padding: 10px;
}
}
a img {
border: none;
}
blockquote {
margin: 0;
font: italic 18px Georgia, serif;
}
dt {
font-weight: bold;
font-size: 14px;
}
dd + dt {
margin-top: 0.5em;
}
dd {
margin-left: 1.0em;
}

#container {
background: #FFF;
padding: 5px;
margin-bottom: 20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

/**** Transitions ****/

.transitions-enabled.masonry,
.transitions-enabled.masonry .masonry-brick {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}

.transitions-enabled.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.transitions-enabled.masonry .masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}

.homepage .item {
width: 200px;
float: left;
padding: 50px;
margin: 10px;
font-weight: 300;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 30px;
background-color:#FFFFFF;
/*#CCCCCC;*/

}

.homepage .big-text, .homepage .link {
font-size: 20px;
line-height: 1.2em;
}
.homepage .big-text{
height:5px;
text-overflow: ellipsis;
white-space: nowrap;
-o-text-overflow: ellipsis;
overflow: hidden;
}

.homepage .link {
padding: 0;
word-wrap: break-word ;
-moz-word-wrap: break-word ;
}
.homepage .link a {
display: block;
padding: 20px;
width: 150px;
background: #BEDAE4;
color: #FFFFFF;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 30px;

}
.homepage .link a:hover {
background-color: #A0C9D8;
}

/**** Clearfix ****/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.item link img {
margin-top: 10px;
margin-bottom: 10px;
}

行動規範の内容に同意します

回答2件

floatで横並びにしたボックスの高さが揃っていない状態だと、
参考ページのようにレイアウトがガタガタになってしまいます。
検証はしてないので推測ですが、
おそらく微妙にボックスの高さが揃っていないのだと思われます。

今回はボックスの中身が画像だけのようなので、
確実に全ての画像の高さが同じになるように素材側を調整するか、
最も高さの大きいものに合わせてボックスにheight指定をすれば恐らく直ると思います。

仮に中身が画像だけではなくテキストベースのものも入ってくる等、
高さを固定することが困難なのであれば、JavaScriptなどで高さを揃えるなどの処置が必要になります。
私が良く使っているのはこちらのプラグインになります。

・jquery.matchHeight.js

参考までに。

投稿2015/10/26 03:44

aKusano

総合スコア3763

Tomoaki_Fukuda

2015/10/26 10:48

なるほど、ご教示ありがとうございます。今回はボックスの中身はアフリエイトのリンク画像で構成しております。下記のような形で、「幅」と「高さ」をしているはずなんですが、レイアウトの崩れがみられます。原因分かりますでしょうか？

Tomoaki_Fukuda

2015/10/26 10:49

<div class="item link"> <input type="checkbox">check! <a href="http://hb.afl.rakuten.co.jp/hgc/14724c70.5362d68b.14724c71.2e07ee24/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fauc-tansera%2fcp3386461515671%2f%3fscid%3daf_link_img&m=http%3a%2f%2fm.rakuten.co.jp%2fauc-tansera%2fn%2fcp3386461515671" target="_blank"><img src ="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fauc-tansera%2fcabinet%2fsyouhingazou13%2fcp3386461515671.jpg%3f_ex%3d128x128&m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fauc-tansera%2fcabinet%2fsyouhingazou13%2fcp3386461515671.jpg%3f_ex%3d80x80" height ="150" width="130" border="0"></a>  </div>

Tomoaki_Fukuda

2015/10/26 10:50

上記のように、アフリエイトのリンクの中にheight ="150" width="130"を指定しているのですが、質問文に添付したような状態になってしまいます。何卒ご教示頂きたくお願い致します。

行動規範の内容に同意します

１つめの画像の高さ(278ピクセル)
<img src="images/photo01.jpg" width="180" height="278">
が、
3～6番目の画像の高さ(120～126ピクセル)
<img src="images/photo03.jpg" width="180" height="124">
<img src="images/photo04.jpg" width="180" height="120">
<img src="images/photo05.jpg" width="180" height="120">
<img src="images/photo06.jpg" width="180" height="126">
の２倍ほどあるのですが、画像URLで表示される画面を見ると、商品画像の大きさは、だいたい同じ大きさに見えます。

１つ目の画像のheightの設定が商品画像の実際の高さよりも大きすぎるために、商品画像の下側に空白が作られ、そのために５番目の画像が押し下げられているのではないでしょうか？

投稿2015/10/26 03:05