Question

这是我的代码jsfiddle。我有三个文本字段。 headline1Txt，headline2Txt和headline3Txt。现在它工作正常，但如果我改变我的标题1Txt为复古蕾丝绿松石连衣裙。标题2Txt到SAle价格135美元和标题3Txt到Reg：50美元然后我的文字对齐相互重叠，我希望我的文字看起来像this 。谁能告诉我我在这里做错了什么？

 <div id="mainContainer">
 <div id="logo">
  <img id="Img1" src="http://i.share.pho.to/cc9794da_o.png" width="50px" height="50px"/>
 </div>
    <div id="images">
        <img id="introImg" src="http://i.share.pho.to/ebe3afc7_o.png"/>
    </div>

    <div id="headlineText">
        <p id="headline1Txt" >Striped Bag</p><br />
        <p id="headline2Txt" >$14</p><br />
        <p id="headline3Txt" >Sale $25</p><br />
    </div>
    <div id="ctaBtn">
      <button class="btn btn-primary" type="button">SHOP NOW</button>
    </div>

</div>
Thanks

Answer 1

css当然可以清理干净。我会尽量避免使用绝对定位，因为它不容易维护或进行更改。在您的示例中，增加标题的文字长度不会将其他标题向下移动，因为它们绝对可以保持原状。

我试图尽可能多地保留您的代码，我只对css进行了更改： http://jsfiddle.net/fAsNt/

我改变的主要内容是标题的定位并增加了宽度，因此它们不会与图像重叠：

#headline1Txt, #headline2Txt, #headline3Txt
{
  position: relative;
  margin: 0px 2px;
  left: -150px;
  width: 170px;
  line-height: 1;
}

Answer 2

在3个标题文本框的每一个中，指定＆＃34; position：absolute;＆＃34;但是不要指定＆＃34; top：＆＃34;属性。指定＆＃34; top＆＃34;他们应该在哪里，你就会被修好。

这里是js小提琴 - 我添加了＆＃34; top＆＃34;在CSS结束时：
http://jsfiddle.net/rttmY/7/

 #headline1Txt { top: 0; }
 #headline2Txt { top: 25px; }
 #headline3Txt { top: 50px; }

另外，摆脱那些＆lt; br /＆gt;。由于你定位绝对，我还建议使用＆lt; div＆gt;标签而不是＆lt; p＆gt;标签，因为你从技术上讲不是制作段落，你是定位块。结果实际上是相同的，但它是用于绝对定位块的最佳实践。

CSS文本设置

2 个答案: