1排对1列纸箱

Question

我试图把我的卡片盒放在一排，而不是在一栏。有人能向我解释一下这个CSS有什么问题吗？

import "./Card.css"

class Card extends PureComponent {

    render() {
        return (
            <div className="cardcontainer">
                <div className="cardbox">
                    <div>{this.props.title}</div>
                    <div>{this.props.category}</div>
                    <div>{this.props.likes / this.props.dislikes}</div>
                </div>    
            </div>
        )
    }
}

export default Card

.cardcontainer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;  
}

.cardbox{
    border: 1px solid red;
    width: 200px;
    height: 200px;
}

Answer 1

您的卡列表样式需要与卡片组件的父组件一起应用。

例如，您可能有另一个组件名为cardList，并在渲染方法中，您应用了纸箱风格的EG。

<div className = cardcontainer>
     <Card/>
</div>

这是因为在您当前的代码中，您已经为每一行启动了纸板容器样式。我用CSS和HTML重新编码了你的作品，这样你就可以明白我的意思了。我希望这能帮到你。

​

.cardcontainer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;  
    width:1000px;
}

.cardbox{
    border: 1px solid red;
    width: 200px;
    height: 200px;
  
}

<div class="cardcontainer">
  <div class="cardbox">
    <div>A title</div>
    <div>A CAtegory</div>
  </div>    


  <div class="cardbox">
    <div>A title</div>
    <div>A CAtegory</div>
  </div>    
</div>

​