スマートフォンサイトコーディングで ul li を table 風に

2013年8月1日更新 view: 46 view
photoBy: http://www.suntory.co.jp/news/2012/l_img/l_11457-1.jpg

もう回り込みなんて怖くない

floatの代替は display;table-cell; で。

スマートフォンサイトはCSS3に対応しているのがほとんど?なので上記CSSが使える。
むかーしのテーブルレイアウト風に横並びとかできるのでめっちゃ楽。
画像小さいけど、こんな風にできるよ?。

CSSとHTML

<style>


.news ul {
margin:0;
padding:0;
}

.news ul li{
display:table;
width:100%;
border-bottom:1px solid #333;
margin:0;
padding:0;
}

.news ul li a{
display:block;
}




.news ul li div:first-child{
display:table-cell;
vertical-align:middle;
width:60px;
}

.news ul li div{
display:table-cell;
vertical-align:middle;
}
</style>




<div class="news">
<ul>
  <li>
         <a href="#">
          <div><img src="http://meigen-plus.com/app/webroot/people/1008.jpg"></div>
                <div>
  
           <p>らーめん</p>
          </div>
            </a>
        </li>
        <li>
         <a href="#">
          <div><img src="http://meigen-plus.com/app/webroot/people/1008.jpg"></div>
                <div>
  
           <p>つけめん</p>
          </div>
            </a>
        </li>
</ul>
</div>

上記は 2列。
divを3つにすれば3列になる。

最初の li にだけ css を指定

.news > li:first-child {
    border-right:1px solid #ddd;
}

これで最初のdivにだけcssを適用できる。

2番目のliにだけ css を指定 、そして上揃え

スポンサードリンク
li:nth-child(2) /* 2番目のdiv */ {
    vertical-align: top;//上揃え
}

要素をグラデーション化

http://www.colorzilla.com/gradient-editor/

のサイトでグラデーションを作って、CSSに適用できる。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

5月23日 ( 木 ) にアクセスが多かった記事はこちら!