bootstrap3でgridを利用して、画像の隣に文字を表示したいです。
左の画像に対して、右の文字は縦に3項目表示します。
画像に対して、右のテーブルの高さが合わず、ご助言頂ければ幸いです。
引き続き自分でも調べますが、何卒宜しくお願い致します。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Bootstrap Sample</title> 8 <!-- BootstrapのCSS読み込み --> 9 <link href="css/bootstrap.min.css" rel="stylesheet"> 10 <!-- jQuery読み込み --> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 12 <!-- BootstrapのJS読み込み --> 13 <script src="js/bootstrap.min.js"></script> 14 <!-- 自作cssの読み込み --> 15 <link rel="stylesheet" href="bootstrap-custom.css" /> 16 </head> 17 <body> 18 <div class="container-fluid"> 19 <div class="row sampleRowA"> 20 <div class="col-xs-6"> 21 <div class="row sampleRowB"> 22 <div class="col-xs-12"> 23 <FONT size="5">テスト</FONT> 24 </div> 25 <div class="col-xs-6"> 26 <img src="kitakyu.jpg" class="img-responsive"> 27 </div> 28 <div class="col-xs-6"> 29 <div class="table-responsive"> 30 <table class="table notitle_table"> 31 <tbody bgcolor="#99FFFF"> 32 <tr><td><h1>h1. Bootstrap heading <small>small text</small></h1></td></tr> 33 <tr><td><h2>h2. Bootstrap heading <small>small text</small></h2></td></tr> 34 <tr><td><h3>h3. Bootstrap heading <small>small text</small></h3></td></tr> 35 </tbody> 36 </table> 37 </div> 38 </div> 39 </div> 40 </div> 41 <div class="col-xs-6"> 42 <div class="row sampleRowB"> 43 <div class="col-xs-12"> 44 <FONT size="5">テスト</FONT> 45 </div> 46 <div class="col-xs-6"> 47 <img src="image_2.jpg" class="img-responsive"> 48 </div> 49 <div class="col-xs-6"> 50 </div> 51 </div> 52 </div> 53 </div> 54 </div> 55 </body> 56</html>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。