让渐变穿过两个并排的 Divs React

Question

至于设置两个 div 并排，我想我理解那部分。我只是想让 CSS 渐变沿着中间分割不间断地穿过两个 div。我希望有一个不涉及复杂着色的解决方案。

我尝试做的是在父 div 中设置背景颜色，而不是为两个并排的子 div 设置颜色。

function Footer() {
    return (
        <div className="box">
            <div className="leftbox">
                <Logo />
            </div>
            <div className="rightbox">
                <p>Hello</p>
            </div>
        </div>
    )
}

.box {
  margin: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,139,1) 100%);
  
}

.leftbox { 
  float:left;  
  width:50%; 
  height:100%; 
  clear: none;
} 

.rightbox{ 
  float:right; 
  width:50%; 
  height:100%; 
  clear: none;
} 

这样做的结果是只有左边的 div 是彩色的。这让我觉得我没有正确地做这整个父/子 div 的事情哈哈哈。所以这就是问题所在，我试图让“框”下的背景跨越两个 div 而不会在中间被打断。

Answer 1

这样做的结果是只有左边的 div 是彩色的。这让我觉得我没有正确地做这整个父/子 div 的事情

错误必须在其他地方 - 我猜 <Logo /> 会破坏绝对有效的 css。
作为一个初学者，给你一个忠告——不要使用float，甚至不要触摸flex，首先——你不需要它们，其次它们的副作用比它们的价值要多。

片段 - 没有float，没有冗余，没有麻烦。在生产中使用borders - 看看你做了什么:)

body{
color: #fff;
text-align: center;
}
.blue, .green{
margin: 2vh 0;
padding: 0;
}
.blue{
background: linear-gradient(to right, rgb(2,0,36), rgba(0,0,139));
border: 1px solid red;
}
.green{
background: linear-gradient(to left, #cf8, #193);
border: 1px solid black;
}
.blue div, .green div{
height: 100%;
width: 49%;     /* kind of insurance - some space for weird devices and browsers */
margin: 0 auto;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
border: 1px dotted #fff;
}

<div class="blue">
<div><img src="blue.jpg" alt="one"></div>
<div>two</div>
</div>

<div class="green">
<div>three</div>
<div>four</div>
</div>

差点忘了 - 像大师一样使用Validator w3c。