Question

任何人都可以告诉我们如何在流星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,
    };

先谢谢。

Answer 1

您应该查看flexible boxes

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

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

其中cardContainer是包装组件的div的类

Answer 2

如果您使用{{1}}，则只需使用行和列水平对齐卡片。

Answer 3

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

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

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

由于 ... Vamsi。

如何在Meteor JS中水平对齐div / profile卡？

3 个答案: