Question

正如您在上面的演示中所看到的，我将此用于提示或您知道的布局类型。

我希望显示文本，以便当它进入第2行时，它从与上面的行相同的行开始，因此它不会在灯泡图像下面并且始终对齐所有行。另外，我希望TIP位于首位，然后在其下方发短信。

如何使用此代码执行此操作？

Answer 1

只需更改css

.tip img { 
      float: left; 
    }

Answer 2

我要做的是将图像作为背景并使用左边的填充来对齐图像和文本。使用<br />将文字放在提示：

下方

HTML：

<div class="tip">
    <span><b>Tip:</b></span><br /><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
</div>

CSS：

.tip {
    background: #f5f2f2 url('http://s30.postimg.org/ayzw4b465/tip.png') no-repeat left;
    padding: 5px 5px 5px 40px;
    border-left:5px solid #33302c;
    margin-bottom: 20px;
}
.tip span {
font-size: 16px;
}

实施例： http://jsfiddle.net/dwrDS/

Answer 3

或者如果您想以自己的方式使用它，只需更改css

即可

<强> CSS

.tip img { 
  float: left; padding-right: 10px; 
}
.tip span {
  font-size: 16px;
}

如何在父div中正确对齐文本？

3 个答案: