Skip to content

Instantly share code, notes, and snippets.

@ayafujiaya

ayafujiaya/gist:7942577

Last active December 31, 2015 05:39
Show Gist options
  • Save ayafujiaya/7942577 to your computer and use it in GitHub Desktop.
Save ayafujiaya/7942577 to your computer and use it in GitHub Desktop.
Download ZIP
ゆうきくんへ
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*******************レイアウト********************/
#img_text_wrap {
display:block;
width: 200px; /* 外枠の幅 */
height: auto; /* 外枠の高さ */
background-color: rgb(204,204,204); /*デバッグ用に外枠に色を付ける */
}
.img_text {
display: inline;
float:left; /*フロートを使って敷き詰める */
width:160px; /* marginとwidthを計算して外枠の幅になるようにする orギリギリになるようにする */
margin: 10px 20px; /* marginとwidthを計算して外枠の幅になるようにする orギリギリになるようにする */
background-color: rgb(242,156,156); /*デバッグ用にクラス要素に色を付ける */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
.inner_text {
width: 100%; /* 親要素のimg_textで決めたwidthいっぱいまで */
}
.inner_img {
width: 100%; /* 親要素のimg_textで決めたwidthいっぱいまで */
}
.flo_reset { /*こいつがないと背景が #img_text_wrapの高さが0になる仕様がある */
clear: both;
}
</style>
</head>
<body>
<div id="img_text_wrap">
<div class="img_text">
<img class="inner_img" src="http://stat.ameba.jp/user_images/20120309/15/saromo/e6/27/j/o0480064011841128519.jpg">
<div class="inner_text">
sampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletext
</div><!-- .inner_text -->
</div><!-- .img_text -->
<div class="img_text">
<img class="inner_img" src="http://stat.ameba.jp/user_images/20120309/15/saromo/e6/27/j/o0480064011841128519.jpg">
<div class="inner_text">
sampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletext
</div><!-- .inner_text -->
</div><!-- .img_text -->
<div class="img_text">
<img class="inner_img" src="http://stat.ameba.jp/user_images/20120309/15/saromo/e6/27/j/o0480064011841128519.jpg">
<div class="inner_text">
sampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletext
</div><!-- .inner_text -->
</div><!-- .img_text -->
<div class="img_text">
<img class="inner_img" src="http://stat.ameba.jp/user_images/20120309/15/saromo/e6/27/j/o0480064011841128519.jpg">
<div class="inner_text">
sampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletext
</div><!-- .inner_text -->
</div><!-- .img_text -->
<div class="img_text">
<img class="inner_img" src="http://stat.ameba.jp/user_images/20120309/15/saromo/e6/27/j/o0480064011841128519.jpg">
<div class="inner_text">
sampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletext
</div><!-- .inner_text -->
</div><!-- .img_text -->
<div class="img_text">
<img class="inner_img" src="http://stat.ameba.jp/user_images/20120309/15/saromo/e6/27/j/o0480064011841128519.jpg">
<div class="inner_text">
sampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletextsampletext
</div><!-- .inner_text -->
</div><!-- .img_text -->
<div class="flo_reset" ></div>
</div><!-- #img_text_wrap -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment