Question

我有以下CSS / HTML块：

<html>
    <head>
        <title>{CODE} Pink</title>
        <style>
            .leftLogo {
                float: left;
                border: black solid;
                background-color: black;
                color: white;
                font-family: Courier, Courier New;
            }


            .rightLogo {
                float: right;
                border: black dashed;
                background: pink;
                color: black;
            }
            .logo
            {
                height: 50px;
                line-height: 50px;
                width: 200px;

                text-align: center;
                vertical-align: middle;
                font-size: 3em;
            }
        </style>
    </head>
    <body>
        <div class="leftlogo logo">{CODE}</div>
        <div class="rightlogo logo">PINK</div>
    </body>
</html>

目前正在做的是：

我希望它做的是：

我知道我可以通过职位来做到这一点，但是最好的方法是什么，这样两个人会在各种场景中保持紧密相连？

Answer 1

更改.rightlogo class的代码以反映这一点：

.rightLogo {
    float: left;
}

而不是目前的情况：

.rightLogo {
    float: right;
}

注意：另外，请注意您对课程的大写。我注意到，在CSS中，您使用的是.leftLogo，但在HTML中，您使用了.leftlogo。我不确定浏览器的要求有多深，因为严格要求，但我不会把它放到IE上来搞砸了。

结果：

.leftLogo {
    float: left;
    border: black solid;
    background-color: black;
    color: white;
    font-family: Courier, Courier New;
}


.rightLogo {
    float: left;
    border: black dashed;
    background: pink;
    color: black;
}

.logo
{
    height: 50px;
    line-height: 50px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    font-size: 3em;
}

<div class="leftLogo logo">{CODE}</div>
<div class="rightLogo logo">PINK</div>

Answer 2

您可以通过将float: left;添加到 .logo 类并删除 .leftLogo＆amp;中的 float 属性来轻松完成此操作。 .rightLogo

Answer 3

我认为这个问题的最佳方法是在容器内设置两个徽标（div），使其具有绝对位置，使它们重叠，然后在右边所需的位置赋予它100％的权利。 / p>

html code
<div class="container">
  <div class="leftLogo logo">{CODE}</div>
  <div class="rightLogo logo">PINK</div>
</div>

css Code
.container{
  position: absolute;           
}
.rightLogo {
  right: 100%;
}

我只将需要添加的代码添加到您当前拥有的代码中。祝您好运

希望这回答你的问题 T04435 ......

PS：原帖中的div在类名中错过了拼写 l 应该是Capital L leftlogo ---＆gt; leftLogo和右边相同

Answer 4

您可以将float:left用于右侧div，并使用媒体查询调整宽度，以获得第二个div到达底部的分辨率。

如何让两个div相互粘贴？

4 个答案: