Question

我想在个人资料照片旁边显示关于我的信息。这是我的HTML：

<div class="row">
  <section class="col col-md-12">
    <div class="pull-left">
      <img height="100" src="/ui/img/male.png" class="profilePic">
    </div>
    <div style="float:left;">
      <h1 class="ng-binding">Hi Test!</h1>
      <br>
      <h6>About</h6>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </div>
  </section>
</div>

两个都有拉左类，但在屏幕1920 * 1080中查看时，约会我显示在照片下方。如果我将约会文字缩小到Lorem ipsum dolor sit amet,，则会在照片旁边完美地查看。

我希望在所有情况下都能在照片旁边显示关于我的信息。如果分辨率较低，它应该继续显示在新行中，然后在照片下面显示（与表格不同）。

请让我知道我错过了什么？我不是HTML设计师，因此技能有限。我尝试了各种显示组合，如内联块等，但它们不会起作用

修改

这是jsfiddle：http://jsfiddle.net/r4hLM/1/

修改

理想情况下，这就是我希望HTML代码的行为方式：

http://gyazo.com/50546b6d806148c0d3dc9f6f962e6a5d

Answer 1

删除float: left

的class="name"

以下是更新后的demo

Answer 2

以下是您的解决方案http://jsfiddle.net/r4hLM/2/

CSS补充道：

.width20{
      width:20% !important;
}
.width80{
      width:79% !important;
    margin-left:1% !important;
}

HTML：

<div class="row">
    <section class="col col-md-12">
        <div class="pull-left width20">
            <img height="100" src="/ui/img/male.png" class="profilePic" />
        </div>
        <div class="name width80" style="float:left;">
             <h1 class="ng-binding">Hi Test!</h1>

            <br/>
             <h6>About</h6>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </div>
    </section>
</div>

在个人资料照片旁边显示我

2 个答案: