html - 可以将多个图像分组到一个 div 中吗

Question

下面给出的示例

 <div id="SocialMediaBadges">

    <a href="http://www.facebook.com/liftedattire">
        <img src="facebook.png"/>
    </a>
    <a href="http://www.twitter.com/liftedattire">
        <img src="twitter.png"/>
    </a>
    <a href="http://www.instagram.com/liftedattire">
        <img src="instagram.pdf"/>
    </a>

</div>

然后让CSS将它们与这样的东西对齐？我已经尝试过该代码，但不幸的是，它不起作用。我可以单独对它们进行编码，但这似乎效率更高。

#SocialMediaBadges {
   float:left;
   width:120px;
   height:90px;
   margin:5px; 
}

Answer 1

试试这个:

#SocialMediaBadges img{
    float:left;
    width:120px;
    height:90px;
    margin:5px; 
}

<强> Working example

注意:如果您想对元素内部的元素进行寻址，可以通过在 css 规则中附加元素来实现。

例如，#id_name div p a 将寻址嵌套在 div 元素中的 p 元素内的所有链接，该元素也嵌套在 element 中id = id_name