プロが教える店舗＆オフィスのセキュリティ対策術

おしえて

display: table-cell が思い通りに表示されない

解決済

  • 質問者：04011
  • 質問日時：
  • 回答数：1件

display: table　と　display: table-cell を利用して、配置をしようと思っているのですが思うようにいきません。

下記のHTMLで、
１つ目のかたまりという部分は思い通りに表示されています。
６００の幅のうち、imgで２００、残り４００で文字を表示しています。

２つ目のかたまりの部分が思い通りに表示されません。
意図は６００の幅のうち
一つ目のimgで２００、次に３００、最後がimgで１００で
配置したいと思っています。


どこがおかしいのでしょうか。

<html lang="ja">
<head>

<title>test</title>
<style type="text/css">
<!--

#main {
margin:0 auto;
text-align:left;
width:600px;
min-height:100%;
background:white;
}
-->
</style>
</head>

<body>

<div id="main">

<!-- １つ目のかたまり -->
<div style="display: table; table-layout: fixed; width: 100%; margin: 0; padding 0;">
<img border=0 width=200px height=60px src="logo.png" alt="logo" style="display: table-cell;background-color:blue;">
<div style="width:400px;height:60px;display: table-cell;text-align: center;vertical-align: middle;background-color:red">
<div style="font-size:20px;">思い通りに表示される　600pxのうち、右の４００pxに文字表示</div>
</div>
</div>


<p>
<!-- ２つ目のかたまり -->
<div style="display: table; table-layout: fixed; width: 100%; margin: 0; padding 0;">
<img border=0 width=200px height=60px src="logo.png" alt="logo" style="display: table-cell;background-color:blue;">
<div style="width:300px;height:60px;display: table-cell;text-align: center;vertical-align: middle;background-color:red">
<div style="font-size:20px;">思い通りにいかない</div>
</div>
<img border=0 width=100px height=60px src="logo2.png" alt="logo2" style="display: table-cell;background-color:yellow">
</div>



<!--/ #main--></div>
</body>
</html>

質問者からの補足コメント

  • うーん・・・

    ありがとうございます！
    インライン要素のimgに"display:table-cell;"するとうまくいかないのは、仕様なのでしょうか。

    インラインでもブロックでもdisplayは使えるように思っていたのですが。

    No.1の回答に寄せられた補足コメントです。 補足日時：2018/02/22 08:17
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



回答がないようなので・・・

<img style="display:table-cell;" src="～～" />
でなく
<div style="display:table-cell;"><img src="～～" /></div>
などとすると、吉かもしれません。
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報