如何对齐div旁边的文字?

时间:2012-03-03 02:33:02

标签: html css

使用css在div旁边进行文本对齐是否可行?我不知道如何解释它,所以这里是我想要的一个例子。感谢。

    DIV TAG text text text text
    DIV TAG text text text text
    DIV TAG text text text text
    text text text text text
    text text text text text
    text text text text text
    text text text text text

2 个答案:

答案 0 :(得分:4)

#article {
    width: 200px;
}

#floating {
    float: left;
    width: 80px;
    height: 80px;
    background-color: #f00;
    margin: 0 10px 10px 0;
}
<p id="article">
    <div id="floating">&nbsp;</div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

答案 1 :(得分:1)

&#13;
&#13;
.inl {
    display: inline;   
    width: 100px;
    height: 20px;
    border: 2px solid red;
}
&#13;
<div class='inl'>div</div> text text text text<br/>
<div class='inl'>div</div> text text text text<br/>
<div class='inl'>div</div> text text text text<br/>
text text text text text<br/>
text text text text text<br/>
text text text text text<br/>
text text text text text<br/>
&#13;
&#13;
&#13;