Flexbox与同一容器中的图像和文本对齐

我正在制作flexbox员工ID卡布局。员工的照片将显示在左侧，员工的信息（姓名，员工ID，部门等）将以列表格式从右到下排列在图像的右侧。Flexbox与同一容器中的图像和文本对齐

我需要使用flexbox来做到这一点。

这里是一个链接到我的jsfiddle什么我迄今所做的：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Flexbox Example 1</title> 
    <style> 
     .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; 
     } 
    </style> 
</head> 

<body> 
    <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> 
</body> 
</html>

http://jsfiddle.net/Hopped_Up_Designs/3teLbqqf

任何及所有的帮助，将不胜感激。谢谢，杰森

来源

2015-01-01 Jason Keith McCoy

“* jsfiddle.net的链接必须附带代码*”并不意味着您应该将链接转换为代码。这意味着你必须在你的问题中包含代码。你现在的代码有什么问题？ – Oriol

谢谢。我修好了。 –

只是包装您的信息中设置为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

来源

2015-01-01 20:19:50 jmore009

谢谢。这将工作:) –

@JasonKeithMcCoy没问题。乐意效劳。你可以请检查一下，尽可能解决吗？ – jmore009

这是我发现的最不显眼的方法是补充一点：

.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/

来源

2015-01-02 17:45:35 paceaux

Flexbox与同一容器中的图像和文本对齐

回答

相关问题