我正在设计一张如下所示的访问卡:
Name Family Image
Position
Phone
Address website
A short list of Product and services small logo
我的主要问题是网站和图片的位置。 我需要将网站地址放在图片左下角旁边。
正如您所见,图片应从右上角开始到网站所在位置。
代码
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12"style="padding-right: 0; border-right: solid;">
<div style="margin-bottom: 2px; text-align: left; background-color: red;">
<div class="row">
<div class="col-md-7">
<p>Part 1</p>
<p>Part 2</p>
<p>Part 3</p>
<p>Part 4</p>
</div>
<div class="col-md-1" style="text-align: bottom;">
<div>Part 5</div>
</div>
<div class="col-md-4">
<img height="100px" width="120px" style="float: right;"
src="http://identityview.net/wp-content/themes/identityview/templates/Global-Business-single.jpg">
</div>
</div>
<div class="row">
<div class="col-md-9">Part 6</div>
<div class="col-md-3">
<img height="60px" width="60px"
src="http://identityview.net/wp-content/themes/identityview/templates/Global-Business-single.jpg"
style="float: right;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:3)
我在JSFiddle中玩过它,这是我的快速解决方案。
<div class="col-md-1">
</div>
<div class="col-md-4" style="float:right;">
<p style="display:inline;vertical-align:bottom;">Website</p>
<img height="100px" width="120px"
src="http://identityview.net/wp-content/themes/identityview/templates/Global-Business-single.jpg">
</div>
我为您更新了JSFiddle,以便您可以在工作中看到解决方案。 http://jsfiddle.net/rc28avn0/1/