Question

<div class="row col-lg-6 col-sm-6">
    <div class="thumbnail">
        <div class="row">
            <div class="pst_h">
                <div class="pr_p col-md-2">
                    <img src="pic" alt="Profile Pic"
                        width="50px" height="50px"/>
                </div>
                <div class="hdr col-md-10">
                    <div class="rec_dtl">
                        <strong>efgh&nbsp;abcd<br/></strong>
                    </div>
                    <div class="rec_dt"> 8/30/14 </div>
                    <div class="post">
                        First of all this query can't work as it is. I already responded about the nee
                    </div>
                </div>
            </div>
        </div>

JSFiddle

我想在图像旁边放置名称和日期，但它显示在图像下方。

Answer 1

您的引导类是正确的，当屏幕宽度为 md （＆gt; = 992px）时，图标将显示标题。如果您展开小提琴面板，您应该看到它按预期工作

默认情况下，小提琴面板非常窄。如果您使用 col-xs ，则文字将始终显示在图片旁边

<div class="row col-lg-6 col-sm-6">
            <div class="thumbnail">
                <div class="row">
                    <div class="pst_h">
                        <div class="pr_p col-xs-2">
                            <img src="pic" alt="Profile Pic"
                            width="50px" height="50px"/>
                        </div>
                        <div class="hdr col-xs-10">
                            <div class="rec_dtl">
                                <strong>efgh&nbsp;abcd<br/></strong>
                            </div>
                            <div class="rec_dt"> 8/30/14 
                     </div>
                    <div class="post">
                       First of all this query can't work as it is. I already responded about the nee                             
                    </div>
                </div>
            </div>
        </div>

新小提琴：http://jsfiddle.net/3khsyqog/

Answer 2

使用css标签：float。

http://www.w3schools.com/cssref/pr_class_float.asp

不要忘记当你使用浮动时，当你完成时清除它：clear：both;

我已经快速解决了您的问题

新小提琴 - http://jsfiddle.net/deg4rht5/

HTML

<div class="row col-lg-6 col-sm-6">
<div class="thumbnail">
    <div class="row">
        <div class="pst_h">
            <div class="hdr col-md-10">
                <img src="pic" alt="Profile Pic" class="float-left" width="50px" height="50px" />
                <div class="rec_dtl float-left"> <strong>efgh&nbsp;abcd<br/></strong>

                </div>
                </br>
                <div class="rec_dt float-left">8/30/14</div>
            </div>
            <div class="clear"></div>
            <div class="pr_p col-md-2">
                <div class="post">First of all this query can't work as it is. I already responded about the nee</div>
            </div>
        </div>
    </div>

CSS

   .float-left {
        float: left;
    }
    .clear {
        clear: both;
    }

Answer 3

我稍微清理了您的HTML代码并添加了CSS。

.rec_dtl{
    display:inline;
    top:0;
    position:absolute
}

JSFIDDLE.

Answer 4

如果您正在使用 Bootstrap ，那么＆＃39;媒体对象＆＃39;组件为您提供所需的服务，并且不需要创建其他CSS代码。

<div class="media">

  <a class="pull-left" href="#">
      <img class="media-object" src="http://placehold.it/64x64" alt="Image"/>
  </a>

  <div class="media-body">
    <h4 class="media-heading">Name - Date</h4>
    lorem lorem lorem lorem lorem lorem lorem lorem
  </div>

</div>

问候语。

编辑：

见这个

http://jsfiddle.net/cu06otLa/2/

Answer 5

尝试使用这些代码<figure>和<figcaption> DEMO

<figure>
    <p><img src="http://img1.liveinternet.ru/images/attach/b/2/1/91/1091831_stan.gif" alt=""></p>
    <figcaption>image deskription</figcaption>
</figure>

 figure {
    background: #d9dabb; 
    display: block; 
    width: 150px; 
    float: left; 
    margin: 0 10px 10px 0; 
    text-align: center; 
   }
   figure img {
    border: 2px solid #8b8e4b; 
   }
   figure p {
    margin-bottom: 0; 
   }

如何在图像旁边放置名称和日期

5 个答案: