Question

我一直试图做一个荒谬的基本任务但却无法完成任务。

我想要一个简单评论的以下结构

*image*  *name*
         *comment*

我无法将文字放在图片的右侧这是我目前的小提琴：http://jsfiddle.net/dvir0776/xaLosyjs/

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px;">
    <div style="text-align:left; font-size:8pt;">
        <h5 style="margin-bottom:0;">Chris Fanelli</h5>
        I would love to win the iphone 6 in black or gold or the mac or the cannon they all are great I love apple products!
    </div>
</div>

任何修改它的调整都会很棒。

Answer 1

只需将float:left添加到您的图片即可。猜猜这就是你要找的东西。

<div class="comment">
    <img src="d.jpg" style="float:left;width:13%; margin-right: 12px;">
             <div style="text-align:left; font-size:8pt;">
             <h5 style="margin-bottom:0;">Chris Fanelli</h5>
             comment comment comment comment comment comment comment comment comment comment!</div>
             </div>

Answer 2

首先，让我们摆脱你的内联样式并使用更好的标记，所以改变你的HTML：

<div class="comment">
    <img src="d.jpg" />
    <div class="textbox">
         <h5>Chris Fanelli</h5>

        <p>comment comment comment comment comment comment comment comment comment comment!</p>
    </div>
</div>

现在不必再一次又一次地写入你的内联样式，你可以利用可重用的类，所以改变你的CSS：

 .comment img {
    width:13%;
    margin-right: 12px;
    display:inline-block;
    vertical-align:middle;
}
h5 {
    font-size:18px;
}
.textbox {
    text-align:left;
    font-size:12px;
    display:inline-block;
    vertical-align:top;
}

Fiddle here

无法对齐图片和文字

2 个答案: