CSS形狀和文本對齊問題

Question

我想創建一個相當簡單的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; 
} 

Answer 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; 
} 

Answer 2

DEMO使用 CSS counters

<ol> 
    <li><hr/><p>item 1</p></li> 
    <li><hr/><p>item 2</p></li> 
    <li><hr/><p>item 3</p></li> 
</ol> 

個

CSS：

*{ 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
} 
body{ 
    background:red; 
} 
ol { 
    counter-reset:li; /*counter init*/ 
} 
li { 
    position:relative; 
    list-style:none; 
    width:100%; 
    color:white; 
    clear:both; 
    display:block; 
    margin-bottom:20px; 
} 
li:before { 
    content:"Step" counter(li); 
    counter-increment:li; 
    position:absolute; 
    top:0; 
    height:100%; 
    width:145px; 
    background:black; 
    color:white; 
} 
li:nth-child(even):before{ 
    right:0; 
} 
li:nth-child(even){ 
    padding:0 120px 0 20px; 
} 
li:nth-child(even) p{ 
    width:40%; 
} 
li:nth-child(odd):before{ 
    left:0; 
} 
li:nth-child(odd){ 
    padding:0 20px 0 220px; 
} 

li:nth-child(even):after,li:nth-child(odd):after{ 
    content:''; 
    position:absolute; 
    width:0; 
    height:0; 
    border-top:20px solid transparent; 
    border-bottom:20px solid transparent; 
    top:50%; 
    margin-top:-16px; 
} 
li:nth-child(odd):after{ 
    border-left:20px solid black; 
    left:142px; 
} 

li:nth-child(even):after{ 
    border-right:20px solid black; 
    right:142px; 
} 
hr{ 
    min-height:50px; 
    border:none; 
    width:100%; 
    clear:both; 
}