1. ホーム
  2. 質問と答え
  3. 高さが分からない場合、divの内容を縦に真ん中に整列する方法は？

高さが分からない場合、divの内容を縦に真ん中に整列する方法は？

2017-03-25 7 views
0

は、ここに私の建設です：高さが分からない場合、divの内容を縦に真ん中に整列する方法は？

 <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/ack2.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/anger.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/angryfire.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/angrytalk.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/banghead.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/banplz.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/bonk.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/bow.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/clap.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/crash.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/crazya.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/crybaby2.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/cussing.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/director.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/dontknow.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/doubt.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/drunken_smilie.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/duhos2.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/dumcsi.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/eplus2.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/faceplant.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/fejvakaras.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/fiesta.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/fplasma.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/fsniper.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/fxloc.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/happy.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_arrow.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_biggrin.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_confused.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_cool.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_evil.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_exclaim.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_eyes.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_idea.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_lol.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mad.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mrgreen.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_neutral.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_question.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_razz.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_sad.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_smile.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_surprised.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumleft.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumright.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_twisted.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_wink.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/indifferent.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/kacsint.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/kerdes.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing-smiley-007.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing1.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing6.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing7.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/levele.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/notworthy.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/occasion14.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-012.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-014.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-036.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/PDT_Armataz_01_37.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/phone.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/popcorn.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/rinya.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/s-shock.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/s-telefrag.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/sad3.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/schmoll2.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/shakehead.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/sign13.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/sign16.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/sir.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/sleepy1.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/smile11.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/smile13.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/smile26.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/smile36.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/smile41.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/smile9.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-chores028.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-gen042.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-scared002.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/smoke.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/tongue3.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/toothy9.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/umm.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor2.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor5.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/violent.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/violent1.gif"></div> 
      </div>  <div class="shoutbox_smileTableContainer">   <div class="shoutbox_smileTable"><img src="/assets/smiles/walking.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/whatever.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/wilting.gif"></div> 
           <div class="shoutbox_smileTable"><img src="/assets/smiles/wtf.gif"></div> 
      </div>    

#SBSMILES 
{ 
    overflow-x: hidden; 
    overflow-y: scroll; 
} 

.shoutbox_smileTable 
{ 
    float: left; 
    width: 25%; 
    text-align: center; 
    padding-bottom: 100%; 
    margin: 0 -1px -100% -1px; 
    background-color: white; 
    border: 1px solid black; 
} 

.shoutbox_smileTable img 
{ 
} 

.shoutbox_smileTableContainer 
{ 
    overflow: hidden; 
}

[https://jsfiddle.net/ccb4q4uu/][1]

あなたが見ることができるように、画像が様々な高さを持っているが、私は途中でそれらすべてをしたいです。どうやってするの？

出典

2017-03-25 John Smith

答えて

1

これをflexレイアウトに変更することができます。作業するのがはるかに簡単です。

display: flexを行に追加してください（.shoutbox_smileTableContainer）。次に、セル（.shoutbox_smileTable）display: flexを作成し、align-items: centerを追加してコンテンツを垂直に整列させ、次にjustify-content: centerを水平に整列させます。

#SBSMILES { 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
} 
 

 
.shoutbox_smileTable { 
 
    width: 25%; 
 
    padding-bottom: 100%; 
 
    margin: 0 -1px -100% -1px; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.shoutbox_smileTableContainer { 
 
    display: flex; 
 
}
<base href="http://www.normalnonoobs.com" target="_blank"> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/ack2.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/anger.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/angryfire.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/angrytalk.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/banghead.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/banplz.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/bonk.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/bow.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/clap.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/crash.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/crazya.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/crybaby2.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/cussing.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/director.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/dontknow.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/doubt.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/drunken_smilie.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/duhos2.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/dumcsi.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/eplus2.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/faceplant.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/fejvakaras.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/fiesta.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/fplasma.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/fsniper.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/fxloc.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/happy.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_arrow.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_biggrin.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_confused.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_cool.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_evil.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_exclaim.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_eyes.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_idea.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_lol.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mad.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_mrgreen.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_neutral.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_question.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_razz.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_sad.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_smile.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_surprised.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumleft.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_thumright.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_twisted.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/icon_wink.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/indifferent.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/kacsint.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/kerdes.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing-smiley-007.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing1.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing6.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/laughing7.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/levele.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/notworthy.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/occasion14.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-012.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-014.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/party-smiley-036.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/PDT_Armataz_01_37.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/phone.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/popcorn.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/rinya.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/s-shock.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/s-telefrag.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/sad3.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/schmoll2.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/shakehead.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/sign13.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/sign16.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/sir.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/sleepy1.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smile11.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smile13.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smile26.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smile36.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smile41.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smile9.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-chores028.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-gen042.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smiley-scared002.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/smoke.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/tongue3.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/toothy9.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/umm.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor2.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/vigyor5.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/violent.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/violent1.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/walking.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/whatever.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/wilting.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="/assets/smiles/wtf.gif"></div> 
 
</div>

出典

2017-03-25 16:50:35

1

height: 100%とvertical-align: middleでinline-blockヘルパーを使用してください。私が知っている限り、これはブラウザ間の最適なソリューションです。

出典

2017-03-25 16:52:39 Feralheart

2

旧式のブラウザと比べても少しシンプルで互換性があるのはどうですか？

ここには、私が達成したいと思っているものがあります。より少ないコードとより良い可視性（私は願っています）。自分自身（フルスクリーン）を見て、それは同様に反応します！

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
.shoutbox_smileTable { 
 
    text-align: center; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    border-width: 0 0 1px; 
 
    height: 50px; 
 
} 
 

 
.shoutbox_smileTable img { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
    .shoutbox_smileTable { 
 
    float: left; 
 
    border-width: 0 1px 1px 0; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 1024px) and (min-width: 768px) { 
 
    .shoutbox_smileTable { 
 
    width: 50%; 
 
    } 
 
    
 
    .shoutbox_smileTable:nth-child(2n) { 
 
    border-right-width: 0; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1024px) { 
 
    .shoutbox_smileTable { 
 
    width: 25%; 
 
    } 
 
    
 
    .shoutbox_smileTable:nth-child(4n) { 
 
    border-right-width: 0; 
 
    } 
 

 
}
<base href="http://www.normalnonoobs.com" target="_blank"> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/ack2.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/anger.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/angryfire.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/angrytalk.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/banghead.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/banplz.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/bonk.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/bow.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/clap.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/crash.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/crazya.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/crybaby2.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/cussing.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/director.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/dontknow.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/doubt.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/drunken_smilie.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/duhos2.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/dumcsi.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/eplus2.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/faceplant.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fejvakaras.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fiesta.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fplasma.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fsniper.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/fxloc.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/happy.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_arrow.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_biggrin.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_confused.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_cool.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_evil.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_exclaim.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_eyes.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_idea.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_lol.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_mad.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_mrgreen.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_neutral.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_question.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_razz.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_sad.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_smile.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_surprised.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_thumleft.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_thumright.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_twisted.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/icon_wink.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/indifferent.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/kacsint.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/kerdes.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing-smiley-007.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing1.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing6.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/laughing7.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/levele.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/notworthy.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/occasion14.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/party-smiley-012.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/party-smiley-014.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/party-smiley-036.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/PDT_Armataz_01_37.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/phone.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/popcorn.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/rinya.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/s-shock.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/s-telefrag.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sad3.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/schmoll2.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/shakehead.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sign13.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sign16.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sir.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/sleepy1.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile11.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile13.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile26.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile36.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile41.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smile9.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smiley-chores028.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smiley-gen042.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smiley-scared002.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/smoke.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/tongue3.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/toothy9.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/umm.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/vigyor2.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/vigyor5.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/violent.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/violent1.gif"></div> 
 
</div> 
 
<div class="shoutbox_smileTableContainer"> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/walking.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/whatever.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/wilting.gif"></div> 
 
    <div class="shoutbox_smileTable"><img src="http://www.normalnonoobs.com/assets/smiles/wtf.gif"></div> 
 
</div>

私はそれが有用だった願っています。

出典

2017-03-25 16:59:27

+1

良好な溶液メイト。 +1 – CodeMonkey

関連する問題

 関連する問題