Q&A
質問文のコード（HTML/CSS）はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
テーブルを２つ置いて中にtable-cellで高さをとると左右文字数が違うので
高さが揃わない
発生している問題・エラーメッセージ
テーブルを２つ作ると左右の画像の高さが揃わないし
テーブルを１つにしてテーブルセルを４つにするとスマホの時に画像が２つ横に並ばない
該当のソースコード
html
<div class="medama_waku"> <div class="medama_box"> <div class="medama_car"> <img src="img/medama_01.jpg"> </div> <div class="medama_text_waku"> <div class="medama_text"> <div class="title">ekスペースカスタム</div> <div class="medama_kakaku">1,248,800</div><div class="medama_en"><ruby><span class="medama_en">円</span><rt>（税込）</rt></ruby></div> <p class="visible-xs text-right syousai_sp" style="text-decoration: underline;">詳細を見る</p> </div> <div class="medama_table_waku hidden-xs"> <table class="medama_table"> <tbody> <tr> <th>カラー</th> <td class="text-center">シルキーベージュ</td> </tr> <tr> <th>年式</th> <td class="text-center">平成27年</td> </tr> <tr> <th>車検</th> <td class="text-center">平成00年00月</td> </tr> <tr> <th>グレード</th> <td class="text-center">L</td> </tr> <tr> <th>ポイント</th> <td colspan="3">スマートキー ベンチシート カーナビ あああああ</td> </tr> </tbody> </table> </div> </div> </div><!--medama_box--> <div class="medama_box"> <div class="medama_car"> <img src="img/medama_01.jpg"> </div> <div class="medama_text_waku"> <div class="medama_text"> <div class="title">ekスペースカスタム</div> <div class="medama_kakaku">1,248,800</div><div class="medama_en"><ruby><span class="medama_en">円</span><rt>（税込）</rt></ruby></div> <p class="visible-xs text-right syousai_sp" style="text-decoration: underline;">詳細を見る</p> </div> <div class="medama_table_waku hidden-xs"> <table class="medama_table"> <tbody> <tr> <th>カラー</th> <td class="text-center">シルキーベージュ</td> </tr> <tr> <th>年式</th> <td class="text-center">平成27年</td> </tr> <tr> <th>車検</th> <td class="text-center">平成00年00月</td> </tr> <tr> <th>グレード</th> <td class="text-center">L</td> </tr> <tr> <th>ポイント</th> <td colspan="3">スマートキー ベンチシート</td> </tr> </tbody> </table> </div> </div> </div><!--medama_box--> </div>
css
.medama_box:after{
display: block;
content: "";
clear:both;
}
.medama_waku{
background-color:red;
background-size: cover;
height:auto;
max-height:300px;
}
.medama_box{
float:left;
display: table;
width:49.5%;
margin:0 0.5% 0 0;
background-image:url(../img/medama_bg.jpg);
padding:15px;
font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", "Osaka-mono", "monospace";
}
.medama_box + .medama_box{
margin:0 0 0 0.5%;
}
/目玉画像/
.medama_car{
display: table-cell;
width:50%;
position: relative;
overflow: hidden;
}
.medama_car img{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
max-height:100%;
height:100%;
object-fit: cover;
}
/目玉タイトル・価格/
.medama_text_waku{
display: table-cell;
width:50%;
padding-left:15px;
}
.medama_text{
width:100%;
text-align: right;
}
.medama_text .title{
width:100%;
color:#fff;
font-size:22px;
background-color:#E78413;
padding:5px;
text-align: center;
border-radius: 5px;
font-weight: bold;
}
.medama_kakaku{
display: inline;
font-size:36px;
line-height:70px;
color:red;
font-weight: bold;
}
.medama_table th,.medama_table td{
font-size:14px;
line-height:22px;
border-bottom: 1px dashed #666;
}
.medama_table th{
width:80px;
}
.medama_en{
display: inline;
font-size: 18px;
}
試したこと
大枠をtableにしてそれそれtable-cellにするとPCでは２つの画像と文字が揃ったが
スマホの時に画像が２つ並ばない
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
質問ありがとうございます。質問画面でコードブロックを囲っても表示できなかったので解答欄にコードを入れました。
回答は回答のためにあるため、そういう使い方はお勧めしません。運営にコンタクトをとり、削除されることをお勧めします。https://teratail.com/contact/input また質問文について、こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。
返答ありがとうございます。一旦質問を削除して新たに質問させていただきます。
なんで削除になるのですか？ 6文字(```二つ）質問に追加すれば済む話ですよ。
既に回答もついているので、削除はどのみち認められません。
プレビューでは囲めたのですが、反映されなかったので解答欄に入れてしまいました。今運営にタグ追加要請しています。返答ありがとうございます。
回答1件
0
html <div class="medama_waku"> <div class="medama_box"> <div class="medama_car"> <img src="img/medama_01.jpg"> </div> <div class="medama_text_waku"> <div class="medama_text"> <div class="title">ekスペースカスタム</div> <div class="medama_kakaku">1,248,800</div><div class="medama_en"><ruby><span class="medama_en">円</span><rt>（税込）</rt></ruby></div> <p class="visible-xs text-right syousai_sp" style="text-decoration: underline;">詳細を見る</p> </div> <div class="medama_table_waku hidden-xs"> <table class="medama_table"> <tbody> <tr> <th>カラー</th> <td class="text-center">シルキーベージュ</td> </tr> <tr> <th>年式</th> <td class="text-center">平成27年</td> </tr> <tr> <th>車検</th> <td class="text-center">平成00年00月</td> </tr> <tr> <th>グレード</th> <td class="text-center">L</td> </tr> <tr> <th>ポイント</th> <td colspan="3">スマートキー ベンチシート カーナビ あああああ</td> </tr> </tbody> </table> </div> </div> </div><!--medama_box--> <div class="medama_box"> <div class="medama_car"> <img src="img/medama_01.jpg"> </div> <div class="medama_text_waku"> <div class="medama_text"> <div class="title">ekスペースカスタム</div> <div class="medama_kakaku">1,248,800</div><div class="medama_en"><ruby><span class="medama_en">円</span><rt>（税込）</rt></ruby></div> <p class="visible-xs text-right syousai_sp" style="text-decoration: underline;">詳細を見る</p> </div> <div class="medama_table_waku hidden-xs"> <table class="medama_table"> <tbody> <tr> <th>カラー</th> <td class="text-center">シルキーベージュ</td> </tr> <tr> <th>年式</th> <td class="text-center">平成27年</td> </tr> <tr> <th>車検</th> <td class="text-center">平成00年00月</td> </tr> <tr> <th>グレード</th> <td class="text-center">L</td> </tr> <tr> <th>ポイント</th> <td colspan="3">スマートキー ベンチシート</td> </tr> </tbody> </table> </div> </div> </div><!--medama_box--> </div>
css
.medama_box:after{ display: block; content: ""; clear:both; } .medama_waku{ background-color:red; background-size: cover; height:auto; max-height:300px; } .medama_box{ float:left; display: table; width:49.5%; margin:0 0.5% 0 0; background-image:url(../img/medama_bg.jpg); padding:15px; font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", "Osaka-mono", "monospace"; } .medama_box + .medama_box{ margin:0 0 0 0.5%; } /*目玉画像*/ .medama_car{ display: table-cell; width:50%; position: relative; overflow: hidden; } .medama_car img{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); max-height:100%; height:100%; object-fit: cover; } /*目玉タイトル・価格*/ .medama_text_waku{ display: table-cell; width:50%; padding-left:15px; } .medama_text{ width:100%; text-align: right; } .medama_text .title{ width:100%; color:#fff; font-size:22px; background-color:#E78413; padding:5px; text-align: center; border-radius: 5px; font-weight: bold; } .medama_kakaku{ display: inline; font-size:36px; line-height:70px; color:red; font-weight: bold; } .medama_table th,.medama_table td{ font-size:14px; line-height:22px; border-bottom: 1px dashed #666; } .medama_table th{ width:80px; } .medama_en{ display: inline; font-size: 18px; }
投稿2018/05/15 02:03
総合スコア6
あなたの回答
tips
プレビュー
