Flexbox 与同一容器内的图像和文本对齐
Posted
技术标签:
【中文标题】Flexbox 与同一容器内的图像和文本对齐【英文标题】:Flexbox alignment with images and text inside same container 【发布时间】:2015-02-28 07:39:09 【问题描述】:我正在制作一个 flexbox 员工 ID 卡布局。员工的照片将显示在左侧,员工的信息(姓名、员工 ID、部门等)将以列表格式从上到下显示在图像的右侧。
我需要使用 flexbox 来做到这一点。
这是我迄今为止所做的 JSFiddle 的链接:
http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf
.flex-container
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
min-width: 320px;
max-width: 1220px;
.flex-item
height: 120px;
width: 300px;
background-color: #e46119;
border: 1px solid #626262;
margin: 3px;
padding: 10px 0 0 10px;
span
padding-left: 5px;
<div class="flex-container">
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
<div class="flex-item"><img src="http://placehold.it/100x100">
<span>Text fields will go here</span>
</div>
</div>
任何和所有的帮助将不胜感激。谢谢,杰森
【问题讨论】:
"链接到 jsfiddle.net 必须附有代码" 并不意味着您应该将链接转换为代码。这意味着您必须在问题中包含代码。您当前的代码有什么问题? 谢谢。我已经修好了。 【参考方案1】:我发现的最不显眼的方法是添加以下内容:
.flex-item
display:flex;
align-items: center;
.flex-item img
flex-grow:0;
flex-shrink:0;
如果您在 img 之后立即添加多个 <span>
,它们将继续以行方式显示(如浮动)。不过,这可能不是您想要的。一种选择是将每个项目设置为固定宽度——但这破坏了 flexbox 的精神。
但是,如果您修改文本包装以包含单个 <div>
,我认为您会没事的。 <div>
将显示为块级元素,直到您选择其他方式。
<div class="flex-item">
<img src="http://placehold.it/100x100">
<div>
<ul>
<li>Text fields will go here</li>
<li>and here</li>
</ul>
</div>
</div>
这是我做这个的你的小提琴的一个叉子。 http://jsfiddle.net/Paceaux/7fcqkb50/1/
【讨论】:
【参考方案2】:只需将您的信息包装在一个设置为 display: inline-block
的容器中:
HTML
<div class="flex-item">
<img src="http://placehold.it/100x100"/>
<div class="info-container">
<p>Field 1</p>
<p>Field 2</p>
<p>Field 3</p>
</div>
</div>
CSS
.info-container
display: inline-block;
vertical-align: top;
padding: 0 0 0 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
.info-container p
padding: 0;
margin: 0 0 10px;
FIDDLE
【讨论】:
@JasonKeithMcCoy 没问题。乐意效劳。如果可以的话,您能否将其勾选为已解决?以上是关于Flexbox 与同一容器内的图像和文本对齐的主要内容,如果未能解决你的问题,请参考以下文章