Question

我有三张照片，第一张是巴西国旗和英国国旗（语言设置）......第三张是我网站的标志......

代码：

            <a class="language" href=""><img  src="assets/images/language/portuguese.png">Português</a>
            <a class="language" href=""><img  src="assets/images/language/english.png">English</a>
            <img class="logo" src="assets/images/logo.png">

我希望第一个和第二个超过第三个......

所以，在我的css中我做了：

.language {
    margin: 0 5px 0 10px;
}

.logo {
    width: 40%;
    margin-top: 60px;
}

有什么不对？它不起作用。

Answer 1

此刻，您将所有三张图片放在同一行＆＃34; row＆＃34;中。你没有以任何方式将它们分成两行。

我建议将语言图标放在他们自己的div标签中，如下所示：

<div>
    <a class="language" href=""><img  src="assets/images/languag/portuguese.png">Português</a>
    <a class="language" href=""><img  src="assets/images/language/english.png">English</a>
</div>
    <img class="logo" src="assets/images/logo.png">

Answer 2

您的问题中缺少更多信息，但我猜是

<style type="text/css">
    .classe1 {
        background-image: url('../../Content/images/carousel2.jpg');
        background-repeat: no-repeat;
        height:100px;
    }
</style>

<div class="classe1">
    <img src="../../Content/images/Icon1.png" alt="" width="40px" />
    <img src="../../Content/images/Icon2.png" alt="" width="40px" />
</div>

Answer 3

就这样做吧

<强> HTML

<div class="wrapit">
    <a class="language" href=""><img src="assets/images/language/portuguese.png">Português</a>
    <a class="language" href=""><img src="assets/images/language/english.png">English</a>
    <img class="logo" src="assets/images/logo.png">
</div>

<强> CSS

.wrapit { 
    width: 100px;
    float: left;
}
.wrapit img { width: 100%; float: left; }
.wrapit a { float: left; width: 50%; display: block; }

Answer 4

如果您无法影响HTML，可以使用CSS制作<br>：

a + a:after {
    content: "\A";
    white-space: pre;
}

由于::before和::after不适用于<img>这样的自动关闭代码，因此您必须将其添加到第二个<a>

Voila demo

与css图像旁边的图像

4 个答案: