gpt4 book ai didi

CSS 形状和文本对齐问题

转载 作者:太空宇宙 更新时间:2023-11-04 03:56:17 26 4
gpt4 key购买 nike

enter image description here我正在尝试使用几乎类似的 div 和 css 形状创建一个非常简单的布局。

My fiddle

所以我试图让看起来像箭头的 div 与一些带有文本的 div 对齐。这相对简单,但我很难让它们对齐?

我现在有点卡住了,而且情况变得更糟了......

<div id="columnsservices" style="padding: 0px 0 60px 0;">


<div style="float: left; width: 900px; padding: 0px 80px 0 32px; ">




<div style="float: left; width: 920px;">


<h1 style="color: rgba(64,34,99,1.00); font-size: 30px; padding: 30px 0 30px 0px;">Steps to supported living</h1>

<div class="stepbox">Step 1
<div class="stepboxright" style="width: 670px; background: red; margin-left: 250px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">Individual/parent/carer – requests a visit or care manager makes a referral <br />and request assessment.</p>
</div></div>


<div class="stepboxright" style="width: 670px; background: red; margin-left: 0px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">dgdfgfdgdgdfg<br />hdaskjdhasjkdh</p>
<div class="stepboxalt">Step 2
</div></div>




<div class="stepbox">Step 3
<div class="stepboxright" style="width: 670px; background: red; margin-left: 250px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 0px 0 0 50px;">Individual/parent/carer – requests a visit or care manager makes a referral <br />and request assessment.</p>
</div></div>





<div class="stepboxright" style="width: 670px; background: red; margin-left: 0px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">dgdfgfdgdgdfg<br />hdaskjdhasjkdh</p>
<div class="stepboxalt">Step 4
</div></div>




<div class="stepbox">Step 5
<div class="stepboxright" style="width: 670px; background: red; margin-left: 250px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">Individual/parent/carer – requests a visit or care manager makes a referral <br />and request assessment.</p>
</div></div>





<div class="stepboxright" style="width: 670px; background: red; margin-left: 0px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">dgdfgfdgdgdfg<br />hdaskjdhasjkdh</p>
<div class="stepboxalt">Step 6
</div></div>



<div class="stepbox">Step 7
<div class="stepboxright" style="width: 670px; background: red; margin-left: 250px; margin-top: -16px; height: 120px; z-index:0;">
<p style="padding: 40px 0 0 50px;">Individual/parent/carer – requests a visit or care manager makes a referral <br />and request assessment.</p>
</div></div>
</div>

</div>


</div>

.stepbox{position: relative;
width: 250px;
height: 120px;
padding: 0px;
background-color: rgba(65,34,98,1.00);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
color: #FFF;
}
.stepbox:after
{
content: "";
position: absolute;
top: 32px;
right: -39px;
border-style: solid;
border-width: 28px 0 28px 39px;
border-color: transparent rgba(65,34,98,1.00);
display: block;
width: 0;
z-index: 1;
}

.stepboxalt{position: relative;
width: 250px;
height: 120px;
padding: 0px;
background-color: rgba(65,34,98,1.00);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
float: right;
left: 250px;
top: -72px;
}
.stepboxalt:after
{
content: "";
position: absolute;
top: 32px;
left: -39px;
border-style: solid;
border-width: 28px 39px 28px 0;
border-color: transparent rgba(65,34,98,1.00);
display: block;
width: 0;
z-index: 1;
}

最佳答案

这里是您根据需要进行调整的快速方法。

Codepen Example

HTML

    <div class="wrapper">
<div class="step left">
<div class="arrow">

</div>
<div class="content">

</div>
</div>
<div class="step right">
<div class="arrow">

</div>
<div class="content">

</div>
</div>

</div>

**CSS**

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.wrapper {
width:50%;
margin:10px auto;
}

.step {
background-color: red;
overflow:hidden; /* quick clearfix */
margin-bottom:4px;
}

.arrow {
width:25%;
background-color:blue;
height:75px;
float:left;
position: relative;
}

.content {
width:75%;
float:left;
}

.right .arrow,
.right .content{
float:right;
}

.left .arrow:after,
.right .arrow:before {
position: absolute;
content:"";
top:50%;
width:0;
height:0;
border:1rem solid transparent;
margin-top:-1rem /* border -width */
}

.left .arrow:after{
left:100%;
border-left-color:blue;
}

.right .arrow:before {
right:100%;
border-right-color:blue;
}

关于CSS 形状和文本对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22764630/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com