我试图将我的右侧div包裹在我的左侧,呈倒月形状?这就是它现在的样子。
我想要做的是让红色块围绕黑色块的圆角。这是当前的HTML / CSS代码,我很抱歉,如果CSS代码有点“混乱”,因为我已经尝试了不同的代码。
HTML
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
</div>
CSS
.content {
margin-top: 75px;
position: relative;
width: 70vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
}
.options {
margin-top: 75px;
position: relative;
width: 30vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
更新
回答找到了,感谢您的帮助,所以不得不从您发布的代码中调整一下代码,现在看起来就像这样。
.content {
margin-top: 75px;
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:3%;
position:relative;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
并且最终结果看起来像这样,会更多地调整定位,但结果是我想要的,再次感谢。
更新2
好的,不得不进行另一次编辑,出于某种原因我不得不将它们两个漂浮起来。如果我保持红色div向右浮动并试图扩大其宽度,它会向左扩展,任何想法为什么?当前代码:
.content {
margin-top: 75px;
width: 44vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:20%;
position:relative;
float:left;
width: 50vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
答案 0 :(得分:2)
使用position:relative; content
和位置:绝对; options
.content {
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-left:3%;
position:absolute;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>