Question

我的HTML如下所示：

return (
 <div>
    <If condition={this.state.showFullSizedImage}>

       {/* Main div with full sized background image */}
        <div className="div-one">
        </div>

        {/* Product details div */}
        <If condition={!this.state.showRegistration && !this.state.showLogin}>
         <div className="div-five">

          </div>
         </If>

         {/* Show half page registration */}
          <If condition={this.state.showRegistration}>
              <div className="div-two">

               </div>
          </If>

           {/* Show half page login */}
           <If condition={this.state.showLogin}>
               <div className="div-three">

               </div>
            </If>

            {/* Show half page Password forget */}
            <If condition={this.state.showPwdForgot}>
                <div className="div-four">

                </div>
            </If>
         </If>
        </div>
     );

SCSS：

.div-one {
  background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  position: fixed;
  width: 100%;
  min-height: 500px;
  min-height: 100vh;
  display: block;
}
.div-two {
  position: fixed;
  width: 50%;
  height: 100vh;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div2 0.2s forwards;
  animation: left-to-right-div2 0.2s forwards;
}
.div-three {
  position: fixed;
  width: 50%;
  height: 100vh;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}
.div-four {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}

.div-five{
  position: absolute;
  min-height: 250px;
  min-height: 50vh;
  background-color: brown;
  display: block;

}

我想要实现的目标是：

我的div-one应该是一个全屏分区，我应该看到div-five。在div-one中有一个按钮，当点击 - div-two或div-three或div-four应该打开50％宽度以及div-one如下：

现在div-one，two，three和4正确渲染。但是div-five不能因为它和其他div的位置不匹配。

我该怎么办？

Answer 1

不确定这是否会有所不同，但是你没有为.div-five设置任何宽度（你为高度设置了两个值）。

由于你的div是emtpy（在你的示例代码中）并且没有宽度，我认为它是渲染的，但没有任何宽度。

但你应该能够在你的控制台中看到这个......

反应div位置

1 个答案: