Question

这是我的code工作正常，但是当我将headline2text更改为“售价25美元。这是示例文本。$ 244”时，自动徽标图像会改变其位置。我不希望徽标改变它的位置，但它应该保留在它的位置，不应受headline2Txt的影响。如何解决这个问题？

 <div id="wrapper">
        <div id="mainContainer">
            <p class="copyrights" id="copyrights"></p>
            <div>
                <img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
            </div>
                  <div id="headlineText">
            <p id="headline1Txt" >Sample bag1</p>
            <p id="headline2Txt" >Sale Price $25 </p>

        </div>
            <div id="disclaimer" >
               Details*
            </div>
              <div id="Image_logo">
                <img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
            </div>

           <div >
           <button class="btn btn-primary" type="button"  id="ctaBtn"><div id="fadeIn" >  Learn More Now </div></button>

        </div>
    </div>


#Image_logo img
{
    position:relative;
    width:140px;
    height:30px;
    top:-3px;
left:390px;
}
</div>

Answer 1

我可能不明白你在问什么，但我认为缺少浮动会让你失望。添加一些像这样的CSS ..

<style>
#Image_logo img {
    width:140px;
    height:30px;
}
#wrapper {
    float:left;
}
</style>

......应该有效。它当然应该在一个单独的.css文件中。

Answer 2

您在 #Image_logo img 上有position: relative;但您尝试将其定位为“绝对路径”。尝试像这样更改CSS：

#Image_logo img {
    position:absolute;
    width:140px;
    height:30px;
    top:40px;
    left:390px;
}

Answer 3

尝试给你的#Image_logo img位置：绝对而不是相对，然后修改top，left等。然后它应该总是在同一个地方;

当徽标长度增加时，CSS徽标会更改其位置

3 个答案: