Question

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

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

layers:
  dependencies:
    path: node_modules

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

这将导致仅左div着色。这让我觉得我没有正确地完成整个父母/孩子的div事情哈哈哈。这就是问题所在，我正在尝试使“框”下的背景跨两个div，而不会在中间被打断。

Answer 1

这将导致仅左div着色。这让我觉得我没有正确地完成整个父母/孩子div的工作

该错误必须在其他地方-我的猜测<Logo />破坏了绝对有效的CSS。
当您是初学者时，请提个建议-不要使用float，甚至不要触摸flex，首先-您不需要它们，其次，它们的副作用比它们还大。值得。

代码段-没有float，没有冗余，没有麻烦。在生产中使用border s-查看您做了什么：）

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。

让梯度跨越两个并排Divs React

1 个答案: