如何在 Meteor JS 中水平对齐 divs/profile 卡？答案

【问题标题】：How to align the divs/profile cards horizontally in Meteor JS?如何在 Meteor JS 中水平对齐 divs/profile 卡？
【发布时间】：2016-11-25 01:25:50
【问题描述】：

谁能告诉我如何在流星js中水平显示个人资料卡。

Please find my code below:


import React, { Component, PropTypes } from 'react';
    export default class MyProfileCard extends Component {
      render() {
        return (
         <div className="card profile-photo" >
          <div className="brand-myImage">
              <img src= {this.props.imgSrc ? this.props.imgSrc : "img.jpg"} />
           </div>
          </div>
        )
      }
    }
    DiscoverCard.propTypes = {
      imgSrc: PropTypes.string,
    };

提前致谢。

【问题讨论】：

标签： javascript jquery css meteor

【解决方案1】：

你应该看看flexible boxes

在您的情况下，请尝试以下 css：

.cardContainer {
  display: flex,
  flex-direction: row
}

cardContainer 是包装组件的 div 的类

【讨论】：

非常感谢 Michel，以及 .cardContainer { display: flex, flex-direction: row } 添加 .profile-photo{ float:left;高度：30%；宽度：30%； } 为我工作。谢谢你。

【解决方案2】：

如果您使用的是Bootstrap，那么您可以简单地使用行和列来水平对齐卡片。

【讨论】：

【解决方案3】：

将以下内容添加到我的 CSS 中对我有用。

.container {
 display:flex;
 flex-direction:row;
}

.profile-photo{
  float:left;
  height:30%;
  width:30%;
}

谢谢 ...Vamsi。

【讨论】：