2012年09月28日

twitter bootstrap ulリスト画像回り込み

お願いします♪いいねとかつぶやいたりして下さい
 
ul li でオリジナルでやりたいばあい。スマートフォンなどに使う。
<style>
ul {
			list-style-type:none;
			margin:10px 0 0 0;
			padding:0;
		}
		
		li {
			clear:both;
			margin:0;
			padding:10px 10px 5px 10px;
			border-bottom:1px solid #ededed;
			height:70px;
			
		}
		
		ul>li>img {
			float:left;
			padding:0 5px 5px 0;
		}
		
		ul>li>h4 {
			font-size:14px;
			display:inline;
		}
</style>
<ul>
            <li>
            <img src="http://tc4.search.naver.jp/?/kaze/mission/USER/20121004/13/1343853/14/443x443x7efe3d16a876e3a6a0c19d16.jpg/c.60x60" />
            <h4><a href="#">銀座 あいうえお</a></h4>
            <p>海外のミュージシャンにサンプリングされた日本の楽曲まとめ海外の・・・</p>
            </li>
            <li>
            <img src="http://www.st-hatena.com/users/ru/ruijio/profile_l.gif" />
            <h4><a href="#">渋谷 かきくけこ</a></h4>
            <p>説明文説明文説明文説明文</p>
            </li>
        </ul>
        
        <div class="clearfix"></div>




以下、span8 の中での作業。
<ul class="thumbnails">
  <li>
  
  <div class="span1">
        <img src="http://placehold.it/120x160"&gt;
      </div>
     
      <h3 class="span7">ここに文字がはいるよ</h3>
  
  </li>
  <li>
  
  <div class="span1">
        <img src="http://placehold.it/120x160"&gt;
      </div>
     
      <h3 class="span7">ここに文字がはいるよ</h3>
  
  </li>

</ul>


これで画像が←、文字列が右
というリストができる。
関連するタグ:
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ