Flexbox alignment with images and text inside same container

前端 未结 2 1095
谎友^
谎友^ 2021-02-13 12:38

I am making a flexbox Employee ID card layout. 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

2条回答
  •  傲寒
    傲寒 (楼主)
    2021-02-13 13:20

    Just wrap your info in a container set to display: inline-block:

    HTML

    Field 1

    Field 2

    Field 3

    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

提交回复
热议问题