在个人资料照片旁边展示我的情况
在个人资料照片旁边展示我的情况
提问于 2014-05-30 10:45:48
我试图展示我旁边的个人资料照片。这是我的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,，它是完美地看到旁边的照片。
我希望在任何情况下，关于我的信息都应该显示在照片旁边。如果分辨率较低，则应继续以新行显示，然后也显示在照片下(与表的td不同)。
请让我知道我错过了什么？我不是一个HTML设计师，所以有有限的技能。我尝试了每一种显示方式的组合，比如内联块等等，但它们都无法工作。
编辑
下面是jsfiddle：http://jsfiddle.net/r4hLM/1/
编辑：
理想情况下，这就是我希望HTML代码的行为方式：
http://gyazo.com/50546b6d806148c0d3dc9f6f962e6a5d
Stack Overflow用户
发布于 2014-05-30 11:03:49
这是您的解决方案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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23952718
复制相关文章
相似问题
腾讯云开发者
