Question

我有一个带有某些内容的react组件，该内容将显示三遍。

我希望组件在同一行中，在三个单独的列中。我已经尝试了很多，但还没有做到。

这将显示三次：

 return (
            <div className={styles.grid}>
            <div className={styles.relatedNews}>
                <div className={styles.row}>
                    <div className={styles.imageContainer}>
                        <a href={this.props.url}><img src={this.props.image} /></a> 
                    </div>
                    <div className={styles.textContainer}>
                        <a href={this.props.url}>
                            <h2 className={styles.newsTitle} title={this.props.title}>{ Utilities.trimWord(this.props.title, 80, '...')}</h2>
                        </a>
                        <span className={styles.subHeadline}>{Utilities.trimWord(this.props.subheader, 50, '...')}
                        </span>
                        <div className={styles.info}>
                            <NewsInfo publishedDate={this.props.publishedDate} likes={this.props.likes} comments={this.props.comments} />
                        </div>
                        <div className={styles.row}>  
                            <NewsTags tags={this.props.tags} tagPageUrl={this.props.tagPageUrl} background={BackgroundType.Grey} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        );

我的CSS：

.grid {
    // display: flex;
    // flex-wrap: wrap;
    // margin: auto auto auto;

    .relatedNews {
        float:left;

        // display: flex;        
        &:hover {
            .textContainer i.bookmark {
                display: block;
            }
        }

        .row {
            // display: flex;      
            // flex-direction: row;
            // align-items: center;
            display: block;
            width: 400px;

            .imageContainer {
                //position: relative;
                // flex: 0 0 215px;
                float:left;
                width: 115px;
                height: 130px;
                overflow: hidden;
                box-sizing: border-box;
                border: 1px solid #eaeaea;

               /*

                .video {
                    position: absolute;    
                    width: 100%;
                    height: 100%;
                    top: 0;
                    right: 0;
                    background-image: linear-gradient(41deg, rgba(0, 0, 0, 0) 77%, rgba(0,0,0,0.8) 110%);

                    i {
                        position: absolute;
                        width: 20px;
                        height: 21px;
                        top: 14px;
                        right: 13px;
                        color: #ffffff;
                        font-size: 20px;

                    }
                }

                */
            }
            .textContainer {
                //position: relative;
               // flex-grow: 1;
                padding-left: 27px;

                @media all and (max-width: 479px) {
                    padding-left: 0;
                }

                a {
                    text-decoration: none;
                }

                .newsTitle {
                    font-size: 17px;
                    color: #333;
                    //margin: 0 0 12px 0;
                    font-weight: normal;
                    //margin-right: 20px;
                    width: 190px;
                }

                .subHeadline {
                    font-size: 15px;
                    color: #858585;
                    margin-bottom: 17px;

                  //  display: inline-block;
                }

                .info {
                    font-size: 12px;
                    color: #c7c7cd;
                }

                .bookmark {
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-size: 18px;
                    padding: 3px;
                    display: none;
                    cursor: pointer;
                    z-index: 9999;
                }
            }                      
        }                

        @media all and (max-width: 479px) {
            display: block;
        }



        // .relatedarticles {
        //   width: 206px;
        //   height: 32px;
        //   font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
        //   font-size: 24px;
        //   font-weight: 300;
        //   font-style: normal;
        //   font-stretch: normal;
        //   line-height: normal;
        //   letter-spacing: normal;
        //   color: #424242;
        // }
    }
}

无论如何我都不会尝试，组件永远不会显示在一行中，而是显示在一列中。

Answer 1

您的html似乎有问题，因此无法正确包装，因为下面仅显示两列，因此它没有显示在三列中

                 <div className={styles.row}>
                  //This is 1st Column Start    
                    <div className={styles.imageContainer}>
                        <a href={this.props.url}><img src={this.props.image} /></a> 
                    </div>
                  //This is 1st Column END
                  //This is 2nd Column Start 
                    <div className={styles.textContainer}>
                        <a href={this.props.url}>
                            <h2 className={styles.newsTitle} title={this.props.title}>{ Utilities.trimWord(this.props.title, 80, '...')}</h2>
                        </a>
                        <span className={styles.subHeadline}>{Utilities.trimWord(this.props.subheader, 50, '...')}
                        </span>
                        <div className={styles.info}>
                            <NewsInfo publishedDate={this.props.publishedDate} likes={this.props.likes} comments={this.props.comments} />
                        </div>
                        <div className={styles.row}>  
                            <NewsTags tags={this.props.tags} tagPageUrl={this.props.tagPageUrl} background={BackgroundType.Grey} />
                        </div>
                    </div>
                  //This is 2nd Column end
                </div>

如果您希望三栏显示在简单的html＆css Sinpet下面使用

.row{
    display: flex;
    flex-wrap: wrap;
    width:100%;
    margin: 0 auto;
}

.row > div{
   flex-basis: 33.33%;
   text-align: center;
   font-size: 24px;
}

<div class="row">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Answer 2

flex属性的工作方式，将flex应用于直接子代，并且仅应用于直接子代，而不是子代的子代。因此，从您的示例看来，您似乎在显示屏上的深度不够。＆flex-direction：行；属性。这些属性应在text-container类上，并使ManyToMany，Element.prototype.QuerySelector_BreadthFirst = function(selector) { let currentLayerElements = [...this.childNodes]; while (currentLayerElements.length) { let firstMatchInLayer = currentLayerElements.find(a=>a.matches && a.matches(selector)); if (firstMatchInLayer) return firstMatchInLayer; currentLayerElements = currentLayerElements.reduce((acc, item)=>acc.concat([...item.childNodes]), []); } return null; };，<a />和<span />都在行方向上弯曲。

当您将<div className={styles.info}/>和<div className={styles.row} />应用于行类时，唯一可以灵活显示的是display: flex;和flex-direction: row，textContainer中的所有内容仍将显示块和因此应垂直放置，因为flex属性不会扩展到孩子的孩子。

不能在一行上设置三个项目

2 个答案: