html – Flexbox与同一容器内的图像和文本对齐

发布时间：2020-12-14 22:33:16 所属栏目：资源来源：网络整理

导读：我正在制作一个flexbox员工ID卡布局.员工的图片将显示在左侧,员工的信息(姓名,员工ID,部门等)将以从上到下的列表格式显示在图像的右侧. 我需要使用flexbox来做到这一点. 这是我到目前为止所做的JSFiddle链接： !DOCTYPE htmlhtml lang="en"head meta charset

我正在制作一个flexbox员工ID卡布局.员工的图片将显示在左侧,员工的信息(姓名,员工ID,部门等)将以从上到下的列表格式显示在图像的右侧.

我需要使用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

任何和所有的帮助将不胜感激.谢谢你,杰森

解决方法

我发现最不引人注目的方法是添加：

.flex-item {
    display:flex;
    align-items: center;
}
.flex-item img{
    flex-grow:0;
    flex-shrink:0;
}

如果你添加多个< span>在img之后,它们将继续以行方式显示(如浮动).但这可能不是你想要的.一个选项可能是将每个项目设置为固定宽度 – 但这会打破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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!