Skip to main content
本文に 2871 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41
@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  display: table;
  background: gray;
}

.box {
  margin: 100px auto;
  width: 33.33%;
  height: 250px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.container_1 img {
  width: 200px;
}

.container_2 img {
  width: 200px;
  display: table-cell;
  vertical-align: middle;
}
<div class="container container_1">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
</div>

<br>

<div class="container container_2">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
</div>

こちらのinternet explorerとgoogle chromeでも、imgは横ではなく縦に表示されます。とりあえず聞きたいこととあっていると思いますか?

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  display: table;
  background: gray;
}

.box {
  margin: 100px auto;
  width: 100%;
  height: 250px;
  vertical-align: middle;
  text-align: center;
}

.container_1 img {
  width: 200px;
  vertical-align: middle;
}

.container_2 img {
  width: 200px;
  vertical-align: middle;
}

span {
  display: table-cell;
}
<div class="container container_1">
  <span><img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt=""></span>
</div>

<br>

<div class="container container_2">
  <span>
<img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  </span>
</div>

他のやり方としては、CSSのdisplayを消してCSSに次のcontainerとboxとcontainer_2 img内のtableを消して次のようにやる方法もあるそうです。

table {
> table-layout: fixed;
}

 

table {
> table-layout: fixed;
}

* {
    margin: 0;
    padding: 0;
}
 

.container {
    width: 960px;
    margin: 0 auto;
    background: gray;
}



 

.box {
    margin: 100px auto;
    width: 33.33%;
    height: 250px;
    vertical-align: middle;
    text-align: center;
}
 

.container_1 img {
    width: 200px;
}

.container_2 img {
    width: 200px;
    vertical-align: middle;
} 

table {
 
   table-layout: fixed; 

}
<!DOCTYPE html>
    <html>
         
<head>
            <meta charset="utf-8">
            <title></title>
            <link rel="stylesheet" href="style.css">
        </head>
         
<body>
    
    <div class="container container_1">
         <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
        <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
        <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
    </div>

  <br>

    <div class="container container_2">
        <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
        <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
        <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
    </div>
 
        </body>
     
</html>
    
こちらのinternet explorerとgoogle chromeでも、imgは横ではなく縦に表示されます。とりあえず聞きたいこととあっていると思いますか?

他のやり方としては、CSSのdisplayを消してCSSに次のcontainerとboxとcontainer_2 img内のtableを消して次のようにやる方法もあるそうです。

table {
> table-layout: fixed;
}

*{
    margin: 0;
    padding: 0;
}
 

.container{
    width: 960px;
    margin: 0 auto;
    background: gray;
}



 

.box{
    margin: 100px auto;
    width: 33.33%;
    height: 250px;
    vertical-align: middle;
    text-align: center;
}
 

.container_1 img{
    width: 200px;
}

.container_2 img{
    width: 200px;
    vertical-align: middle;
}
table {
 
   table-layout: fixed; 

}
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
    
    <div class="container container_1">
         <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
        <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
        <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
    </div>

<br>

    <div class="container container_2">
        <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
        <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
        <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
    </div>
 
        </body>
    </html>
    
@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  display: table;
  background: gray;
}

.box {
  margin: 100px auto;
  width: 33.33%;
  height: 250px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.container_1 img {
  width: 200px;
}

.container_2 img {
  width: 200px;
  display: table-cell;
  vertical-align: middle;
}
<div class="container container_1">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
</div>

<br>

<div class="container container_2">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
</div>

こちらのinternet explorerとgoogle chromeでも、imgは横ではなく縦に表示されます。とりあえず聞きたいこととあっていると思いますか?

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  display: table;
  background: gray;
}

.box {
  margin: 100px auto;
  width: 100%;
  height: 250px;
  vertical-align: middle;
  text-align: center;
}

.container_1 img {
  width: 200px;
  vertical-align: middle;
}

.container_2 img {
  width: 200px;
  vertical-align: middle;
}

span {
  display: table-cell;
}
<div class="container container_1">
  <span><img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt=""></span>
</div>

<br>

<div class="container container_2">
  <span>
<img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  </span>
</div>

他のやり方としては、CSSのdisplayを消してCSSに次のcontainerとboxとcontainer_2 img内のtableを消して次のようにやる方法もあるそうです。

 

table {
> table-layout: fixed;
}

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  background: gray;
}

.box {
  margin: 100px auto;
  width: 33.33%;
  height: 250px;
  vertical-align: middle;
  text-align: center;
}

.container_1 img {
  width: 200px;
}

.container_2 img {
  width: 200px;
  vertical-align: middle;
} 

table {
  table-layout: fixed;
}
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>
 
<body>

  <div class="container container_1">
    <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
    <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
    <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  </div>

  <br>

  <div class="container container_2">
    <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
    <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
    <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  </div>

</body>
 
</html>
本文に 359 文字追加
ソース リンク
kimi Tanaka
  • 276
  • 1
  • 3
  • 11

オリジナルのコードでもこちらのfirefox上だとimgにdisplay:table-cell効いていました。web browserのバグの可能性があるそうです。オリジナルのコードのimgだけ変えたjsfiddleです。
https://jsfiddle.net/kimihiro/vLkph5ez/https://jsfiddle.net/kimihiro/cddbckyp/

https://stackoverflow.com/questions/1977768/img-with-display-table-cell-is-it-a-bug?noredirect=1&lq=1

Edit2:

https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level より img はinline-block要素(replaced inline elementとも呼ばれている)なのでheightもwidthも本当なら効くようですが、以上のリンクよりウェブ・ブラウザのバグの可能性もあるので、ご自身でお考えになっているspanでinline要素として、display: table-cellとするとchrome、internet explorer上でも作動しますね。

spanを使用したバージョン。
https://jsfiddle.net/kimihiro/x6hdobb5/

オリジナルのコードでもこちらのfirefox上だとimgにdisplay:table-cell効いていました。web browserのバグの可能性があるそうです。オリジナルのコードのimgだけ変えたjsfiddleです。
https://jsfiddle.net/kimihiro/vLkph5ez/

https://stackoverflow.com/questions/1977768/img-with-display-table-cell-is-it-a-bug?noredirect=1&lq=1

オリジナルのコードでもこちらのfirefox上だとimgにdisplay:table-cell効いていました。web browserのバグの可能性があるそうです。オリジナルのコードのimgだけ変えたjsfiddleです。
https://jsfiddle.net/kimihiro/cddbckyp/

https://stackoverflow.com/questions/1977768/img-with-display-table-cell-is-it-a-bug?noredirect=1&lq=1

Edit2:

https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level より img はinline-block要素(replaced inline elementとも呼ばれている)なのでheightもwidthも本当なら効くようですが、以上のリンクよりウェブ・ブラウザのバグの可能性もあるので、ご自身でお考えになっているspanでinline要素として、display: table-cellとするとchrome、internet explorer上でも作動しますね。

spanを使用したバージョン。
https://jsfiddle.net/kimihiro/x6hdobb5/

ウェブブラウザでの作動チェック
ソース リンク
kimi Tanaka
  • 276
  • 1
  • 3
  • 11

先ほど挙げEdit1:

オリジナルのコードでもこちらのfirefox上だとimgにdisplay:table-cell効いていまし英語。web browser StackOverflow のリンク
https://stackoverflow.com/questions/17345596/image-no-longer-responsive-as-put-in-table-cell-layoutバグの可能性があるそうです。オリジナルのコードのimgだけ変えたjsfiddleです。
と同じような感じだhttps://jsfiddle.net/kimihiro/vLkph5ez/

こちらのinternet explorergoogle chromeでもimgは横ではなく縦に表示されます。とりあえず聞きたいこととあっていると思いますか?

バグの可能性についてstackoverflowより

https://stackoverflow.com/questions/1977768/img-with-display-table-cell-is-it-a-bug?noredirect=1&lq=1

他のやり方としては、CSSのdisplayを消してCSSに次のcontainerとboxとcontainer_2 img内のtableを消して次のようにやる方法もあるそうです。

を入れたら効きませんか?

先ほど挙げ英語 StackOverflow のリンク
https://stackoverflow.com/questions/17345596/image-no-longer-responsive-as-put-in-table-cell-layout
と同じような感じだと、CSSのdisplayを消して次の

を入れたら効きませんか?

Edit1:

オリジナルのコードでもこちらのfirefox上だとimgにdisplay:table-cell効いていまし。web browserバグの可能性があるそうです。オリジナルのコードのimgだけ変えたjsfiddleです。
https://jsfiddle.net/kimihiro/vLkph5ez/

こちらのinternet explorergoogle chromeでもimgは横ではなく縦に表示されます。とりあえず聞きたいこととあっていると思いますか?

バグの可能性についてstackoverflowより

https://stackoverflow.com/questions/1977768/img-with-display-table-cell-is-it-a-bug?noredirect=1&lq=1

他のやり方としては、CSSのdisplayを消してCSSに次のcontainerとboxとcontainer_2 img内のtableを消して次のようにやる方法もあるそうです。

本文に 315 文字追加
ソース リンク
kimi Tanaka
  • 276
  • 1
  • 3
  • 11
読み込んでいます
本文に 54 文字追加
ソース リンク
kimi Tanaka
  • 276
  • 1
  • 3
  • 11
読み込んでいます
ソース リンク
kimi Tanaka
  • 276
  • 1
  • 3
  • 11
読み込んでいます