0

私が使用しているソリューションは、本当にハッシュ化されていて、おかしくなっているように感じます。私はこれで立ち往生しているので、ゼロから再構築することはできないので、もっとうまくできることを教えてください。

  <div id="content">
      <div class="blocking"
        <td><a href="https://github.com/kfrncs"><img src="img/github.png" class="social" id="github"></a></td>
        <td><a href="https://twitter.com/kfrncs"><img src="img/twitter.png" class="social" id="twitter"></a></td>
      </div>
      <div class="blocking">
        <td><a href="mailto:kennethpatrickfrancis@gmail.com"><img src="img/gmail.png" class="social" id="gmail"></a></td>
        <td><a href="skype:kennethpatrickfrancis?add"><img src="img/skype.png" class="social middle" id="skype"></a></td>
      </div>
      <div class="blocking">
        <td><a href="http://stackoverflow.com/users/2837229/kfrncs"><img src="img/stackoverflow.png" class="social" id="stackoverflow"></a></td>
      </div>

CSS:

@media only screen and (min-width: 320px) and (max-width: 768px)
{
    .blocking {
        display: block;
        padding: 2vh 25vw 0 30vw;
        margin-left: auto;
        margin-right: auto;
    }
    #github {
        margin-top: 5vh;
    }
    #stackoverflow {
        margin-bottom: 5vh;
    }
    .titleres {
        display: block;
    }
}



@media only screen and (min-width: 768px) and (max-width: 1024px)
{
    .blocking {
        display: block;
        padding: 5vh 20vw 0 24vw;
    }
    #stackoverflow {
        margin-left: 9vw;
    }
}

@media only screen and (min-width: 1024px)
{   
    .blocking {
        display: inline;
    }
}

フルサイズのモニターでは要素をすべて中央に配置し、5 列に並べて表示しますが、画面が小さい場合はうまく一緒にスライドするようにします。それらを電話サイズの画面の中央に配置する方法がわかりません。最終結果が異なっていても、私がやっていることを処理するためのまったく異なる方法の例をいただければ幸いです。しかし、私がやろうとしていることを適切に微調整する方法があれば、それもありがたいです。

編集: http://kennethfrancis.com

4

3 に答える 3

1

HTML をクリアする必要があります。ロジックと構文に問題があると思います。これはあなたができることの簡単なサンプルです:

jsフィドル

HTML

<div id="content">
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
    <a href="#">
      <img src="http://lorempixel.com/160/120" />
    </a>
</div>

CSS

#content{
    width:80vw;
    text-align:center;
}
a{
    display:inline-block;
}
于 2013-11-11T07:32:34.673 に答える
0

おい、まず第一に、あなたのhtmlは非常に悪いです.あなたは1秒以内に置くことはできません.あなたは開いているdivを持っています.

3番目に、コンテンツを中央に配置した5行だけが必要な場合は、5つのdivを使用するだけで、各divは幅100％でテキストを中央に配置するcss属性を取り、それだけです

于 2013-11-11T07:16:09.210 に答える