[英]Flexbox alignment with images and text inside same container
I am making a flexbox Employee ID card layout. 我正在制作一个flexbox员工ID卡布局。 The employee's picture will go to the left and the employee's info (name, employee-id, department, etc) will go to the right of the image in a list format top-to-bottom.
员工的图片将显示在左侧,员工的信息(姓名,员工ID,部门等)将以从上到下的列表格式显示在图像的右侧。
I need to do this using flexbox. 我需要使用flexbox来做到这一点。
Here is a link to my JSFiddle with what I have done so far: 这是我到目前为止所做的JSFiddle链接:
http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf 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>
Any and all help would be much appreciated. 任何和所有的帮助将不胜感激。 Thanks, Jason
谢谢你,杰森
The most unobtrusive approach which I found was to add this: 我发现最不引人注目的方法是添加:
.flex-item {
display:flex;
align-items: center;
}
.flex-item img{
flex-grow:0;
flex-shrink:0;
}
If you add multiple <span>
immediately after the img, they'll continue displaying in row fashion (like a float). 如果在img之后立即添加多个
<span>
,它们将继续以行方式显示(如浮点数)。 This may not be the what you want, though. 但这可能不是你想要的。 One option could be to set each item to a fixed width - but that breaks the spirit of flexbox.
一个选项可能是将每个项目设置为固定宽度 - 但这会破坏flexbox的精神。
But if you modify your text wrapper to contain a single <div>
, I think you'll be fine. 但是如果你修改你的文本包装器以包含一个
<div>
,我想你会没事的。 The <div>
will display as a block level element until you choose otherwise. 除非您另行选择,否则
<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>
Here's a fork of your fiddle where I did this. 这是我小提琴的一个叉子,我这样做了。 http://jsfiddle.net/Paceaux/7fcqkb50/1/
http://jsfiddle.net/Paceaux/7fcqkb50/1/
Just wrap your info in a container set to display: inline-block
: 只需将您的信息包装在一个容器集中即可
display: inline-block
:
HTML 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 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.