Question

我正在尝试将此设计应用到我正在处理的网站中，而且我似乎遇到了一些麻烦。我如何完成这种造型。

http://i255.photobucket.com/albums/hh140/testament1234/message_zps7c5582b0.jpg

<div class="row">
  <div class="span12">
    <div id="message-container">
      <div class="message">
        <img src="images/message_avatar.jpg" alt="Profile Avatar" />
        <h2>Charles Geschke</h2>
        <h3 class="time">10:00 A.M</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum a nunc sit amet bibendum. Vivamus vel eros at turpis volutpat euismod quis eget dui. Nunc a ultrices lacus, eget porta ipsum. Phasellus vel ornare urna. Cras accumsan ipsum a dui vestibulum mattis. Aenean a arcu porttitor quam molestie auctor.</p>
      </div>
    </div>
  </div>
</div>

.message{background-color:#eeeeee; padding:10px}
.message h2{margin-bottom:10px}
.message img{float:left; margin-right:10px;}

这是我编写的，我已尝试过，但由于图像浮动而文字正在下面，因此无法正常工作

CodePen

Answer 1

HTML：

<div class="row">
  <div class="span12">
    <div id="message-container">
      <div class="message">
        <img src="images/message_avatar.jpg" alt="Profile Avatar" />
        <div class="entry-content">
        <h2>Charles Geschke</h2>
        <h3 class="time">10:00 A.M</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum a nunc sit amet bibendum. Vivamus vel eros at turpis volutpat euismod quis eget dui. Nunc a ultrices lacus, eget porta ipsum. Phasellus vel ornare urna. Cras accumsan ipsum a dui vestibulum mattis. Aenean a arcu porttitor quam molestie auctor.</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.message img,
.message .entry-content{
    display:inline-block; 
    vertical-align:middle;
}

Answer 2

尝试将padding-left添加到所有文本元素中（我也建议使用固定的图像宽度）。您可能会丢失margin-right并仅在填充中进行补偿。

.message img{
    float:left;
    width:100px;
}
.message p,
.message h2,
.message h3{
        padding-left:110px;
}

http://jsfiddle.net/daCrosby/R7zaq/

Answer 3

我会从图像中单独包装内容。

1）使用wrap作为id包裹内容。

2）使用h2作为ID包裹标题（h3和wrapHeader）。

<强> HTML：

<div class="message">
    <img src="http://placehold.it/100x100" alt="Profile Avatar" />
    <div id="wrap">  <!-- Wrap the conents-->
        <div id='wrapHeader'>
             <h2>Charles Geschke</h2>
             <h3 class="time">10:00 A.M</h3>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum a nunc sit amet bibendum. Vivamus vel eros at turpis volutpat euismod quis eget dui. Nunc a ultrices lacus, eget porta ipsum. Phasellus vel ornare urna. Cras accumsan ipsum a dui vestibulum mattis. Aenean a arcu porttitor quam molestie auctor.</p>
    </div>
</div>

<强> CSS：

#wrap {
    margin-left: 115px;
    display: inline-block;
    float: right;
}
#wrapHeader h2, h3 {
    display: inline-block;
}
#wrapHeader h3 {
    float: right
}

选中此JSFiddle

试图为消息实现这种样式

CodePen

3 个答案: