質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

6916閲覧

bootstrapのgridの高さを揃える方法に関してご助言頂ければ幸いです。

color

総合スコア90

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2016/08/29 03:26

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

高さを合わせたいなら bootstrap v4-alpha をつかってもいいかもしれない

v3 にはこれはありません。

投稿2016/08/29 03:40

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

無理やりなので、組み方から考えたほうが良いとは思います。

HTML

1<div class="row sampleRowB"> 2 <div class="col-xs-12"> 3 <FONT size="5">テスト</FONT> 4 </div> 5 <div class="xxx"> 6 <div class="col-xs-6 img"> 7 <img src="https://placehold.jp/24/cc9999/993333/350x750.png" class="img-responsive"> 8 </div> 9 <div class="col-xs-6 tbl"> 10 <div class="table-responsive"> 11 <table class="table notitle_table"> 12 <tbody bgcolor="#99FFFF"> 13 <tr><td><h1>h1. Bootstrap heading <small>small text</small></h1></td></tr> 14 <tr><td><h2>h2. Bootstrap heading <small>small text</small></h2></td></tr> 15 <tr><td><h3>h3. Bootstrap heading <small>small text</small></h3></td></tr> 16 </tbody> 17 </table> 18 </div> 19 </div> 20 </div> 21</div>

CSS

1.sampleRowB > .col-xs-12 { 2 float: none; 3} 4.xxx { 5 overflow: hidden; 6 position: relative; 7} 8.xxx>.img { 9 height: 100%; 10 position: absolute; 11} 12.xxx>.img>img { 13 min-height: 100%; 14} 15.xxx>.tbl { 16 float: right; 17} 18.xxx .table-responsive { 19 margin-bottom: 0; 20} 21```**動くサンプル:**[https://jsfiddle.net/94q67y84/](https://jsfiddle.net/94q67y84/) 22 23--- 24 25 26また、font要素とbgcolor属性は非推奨です。 27 28【font 要素 - HTML | MDN】 29[https://developer.mozilla.org/ja/docs/Web/HTML/Element/font](https://developer.mozilla.org/ja/docs/Web/HTML/Element/font) 30> この要素は使用しないで下さい! この要素は HTML 3.2 で一度仕様に取り込まれましたが、HTML 4.01 で他の非セマンティクス要素(※装飾用途のみの要素)とともに非推奨要素に指定され、HTML5 で廃止されています。 31 32【tbody 要素 - HTML | MDN】 33[https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody#attr-bgcolor](https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody#attr-bgcolor) 34> この属性は非標準

投稿2016/08/29 16:08

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問