いつもお世話になっております。
今回は画像なのですが、ブートストラップを使って
900 × 490のindex-top1.pngと
270 × 490のindex-top2.pngを
並べているのですが綺麗に横並び1列になってくれません。
2つ合わせてwideは1170px、間違いないハズなのですが...
padding0; magin0;を至る所に貼ってます。
どこが悪いのかわからないままなのでご教授ください。
よろしくお願いします!
htmlは色々組んでしまったので極力、関係ない部分は削除したものを貼ります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> <title>タイトル</title> <meta name="Description" content="#" /> <meta name="Keywords" content="" /> <link rel="canonical" href="http://www.candy-b.com/" /> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.css" rel="stylesheet" /> <!--css読み込み--> <link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/bs-button-style.css" rel="stylesheet" type="text/css"> <link href="css/bs-button-style.min.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="css/hover.css" rel="stylesheet" media="all"> <!-- jQuery読み込み --> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.zaccordion.min.js"></script> <script src="js/enquire.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.js"></script> <!--WEBfont--> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <div class="wrap"> <body> <div class="index-main"> <div class="background-mainborder1"> </div> <div class="index-c1 "> <div class="container"> <div class="row index-img shadow"> <div class="index-c1img1 col-lg-9 col-sm-9 hidden-xs col-md-9 clear" ><img src="images/index-top1.png" width="100%" height="auto"></div> <div class="index-c1img2 col-sm-3 col-lg-3 hidden-xs col-md-3"><img src="images/index-top2.png" width="100%" hight="auto"> <i class="fa fa-graduation-cap fa-2x"></i><span><p>メニュー</p></span> </div> </div> <div class="index-c1menu"> <div class="row shadow"> <div class="c1menu-1 col-sm-3 col-lg-3 col-md-3 col-sm-offset-2 col-xs-3"><a href="#"><i class="fa fa-pencil fa-2x"></i><br><span>メニュー</span></a></div> <div class="c1menu-2 col-lg-3 col-md-3 col-sm-3 col-xs-3"><a href="#"><i class="fa fa-users fa-2x"></i><br><span class="hidden-xs"> メニュー</span><span class="visible-xs c1menu-span2"> メニュー</span></a></div> <div class="c1menu-3 col-sm-3 col-lg-3 col-md-3 col-xs-3"><a href="#"><i class="fa fa-comments-o fa-2x"></i><br><span>メニュー<br class="visible-xs">メニュー</span></a></div> <div class="c1menu-4 col-xs-3 col-sm-3 col-lg-3 col-md-3 col-md-offset-1 col-sm-offset-1"><a href="#"><i class="fa fa-edit fa-2x"></i><br> <span>メニュー</span></a></div> </div> </div> </div> </div> </div> </body> </div> </html> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-19564741-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>
cssも同様です。
@charset "utf-8"; /* CSS Document */ /* CSS Document */ @media(max-width:991px) { .c4-rink p { padding-right: 10px; position: absolute; z-index: 1; } } .wrap { overflow: hidden; } body { min-width: 767px; width: 100%; } a:hover { opacity: 0.6; text-decoration: none; } img { max-width: 100%; height: auto; } .index-headermain { padding: 0 15px; } .index-headercontact { text-align: right; } .index-headercontact-sm { text-align: right; } .index-headercontact { color: #fff6db; font-size: 14px; letter-spacing: 3px; padding-top: 15px; } .index-headercontact-sm { color: #fff6db; font-size: 14px; letter-spacing: 3px; } .index-mail-sm { font-sixe: 16px; padding: 10px 20px; margin-left: 10px; border: solid 1px; color: #fff6db; text-decoration: none; } .index-mail-sm a { text-decoration-color: #fff6db; text-decoration: none; } .index-mail-sm a:hover { color: #fff6db; text-decoration: none; } .index-mail-sm a:link { color: #fff6db; text-decoration: none; } .index-mail-sm a:visited { color: #fff6db; text-decoration: none; } .index-mail-sm i { padding-right: 10px; } .p-sm { margin-bottom: -9px; } .index-mail { font-sixe: 16px; padding: 10px 20px; margin-left: 10px; border: solid 1px; color: #fff6db; text-decoration: none; } .index-mail a { text-decoration-color: #fff6db; text-decoration: none; } .index-mail a:hover { color: #fff6db; text-decoration: none; } .index-mail a:link { color: #fff6db; text-decoration: none; } .index-mail a:visited { color: #fff6db; text-decoration: none; } .index-mail i { padding-right: 10px; } .index-movie { position: relative; } .index-header { position: fixed; z-index: 100; color: #fff; top: 0; left: 0; margin: 0; padding: 0; background-color: #42c4c4; opacity: 0.8; } .index-headertext { font-size: 8px; margin-top: 0px; padding-top: 5px; color: #fff; text-align: right; } .index-headermenu-ul { margin: 0; padding: 0; list-style: none; color: #fff; } ul.index-headermenu-ul a { display: block; } ul.index-headermenu-ul a:hover { color: #fff; } .index-headermenu-ul a { text-decoration-color: #fff; text-decoration: none; } .index-headermenu-ul a:link { color: #fff; } .index-headermenu-ul a:visited { color: #fff; } .index-headermenu-li { font-size: 14px; text-align: center; border-left: 1px solid #ffffff; } .index-headermenu-li:last-child { border-right: 1px solid #ffffff; } .index-headermenu3-ul { margin: 0; padding: 0; list-style: none; color: #fff; } ul.index-headermenu3-ul a { display: block; } ul.index-headermenu3-ul a:hover { color: #fff; } .index-headermenu3-ul a { text-decoration-color: #fff; text-decoration: none; } .index-headermenu3-ul a:link { color: #fff; } .index-headermenu3-ul a:visited { color: #fff; } .index-headermenu3-li { padding: 0; font-size: 11px; text-align: center; border-left: 1px solid #ffffff; } .index-headermenu3-li:last-child { border-right: 1px solid #ffffff; } .index-headermenu2-ul { margin: 0; padding: 0; list-style: none; color: #fff; } ul.index-headermenu2-ul a { display: block; } ul.index-headermenu2-ul a:hover { color: #fff; } .index-headermenu2-ul a { text-decoration-color: #fff; text-decoration: none; } .index-headermenu2-ul a:link { color: #fff; } .index-headermenu2-ul a:visited { color: #fff; } .index-headermenu2-li { font-size: 12px; text-align: center; border-left: 1px solid #ffffff; } .index-headermenu2-li:last-child { border-right: 1px solid #ffffff; } .index-container { max-width: 100%; height: auto; padding: 0; } .background-mainborder1 { background-color: #28acb3; padding: 6px 0; } .index-main { text-align: center; } .index-c1 { background-image: url(../images/container-background.png); background-position: left top; background-repeat: repeat-x; height: 100%; width: auto; } .shadow { box-shadow: 0px 0px 20px; padding: 0; } .index-c1img1 { float: left; padding: 0; margin: 0; } .index-c1img2 { float: right; padding: 0; margin: 0; position: relative; font-size: 15px; } .fa-graduation-cap { color: #009dbf; position: absolute; width: 185px; top: 71%; left: 40%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .index-c1img2 span { color: rgba(49, 49, 49, 0.702); } .index-c1img2 p { position: absolute; width: 185px; top: 71%; left: 62%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .index-c1menu { padding: 0; margin: 0; } .index-c1menu i { color: #009dbf; } .index-c1menu span { color: rgba(49, 49, 49, 0.702); } .index-c1menu i { padding-bottom: 10px } .index-main { position: relative; z-index: 1; } .c1menu-1 { display: block; margin: 0; padding: 15px; text-align: center; background-color: #d6deed; } .c1menu-2 { display: block; margin: 0; padding: 15px; text-align: center; background-color: #d6e8ed; } .c1menu-span2 { padding-top: 10px; padding-bottom: 10px; } .c1menu-3 { display: block; margin: 0; padding: 15px; background-color: #CDDFE7; } .c1menu-3 a{ display: block; } .c1menu-4 { display: block; margin: 0; padding: 15px; text-align: center; background-color: #FFFFFF; } .index-c2 { text-align: center; font-family: "MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; } .background-mainborder2 { padding: 50px 0; } .index-c2text1 { font-size: 30px; font-family: "Sorts Mill Goudy"; letter-spacing: 1px; } .index-c2text2 { font-size: 27px; font-family: 'MS P明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif'; line-height: 1px; letter-spacing: 5px; }
回答1件
あなたの回答
tips
プレビュー