創建一個具有html特性分組的模板

Question

我創建了一個模板，其中我使用了一個模板，其中僞類嘗試進行分組功能，但是當我更改屏幕大小時它正在變成像素，您可以在此問題中幫助我解決問題。我將顯示圖像應該如何來看待

唯一的問題是在responsivness

小提琴：https://jsfiddle.net/t93v93cn/

代碼如下

HTML

<div class="grouping-container"> 
     <span class="groupBadge"><h4>Group1</h4></span> 
     <div class="headingContainer"> 
      <h1>Heading 1</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> 
     </div> 
     <div class="heading-container"> 
      <h1>Heading 2</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
    </div> 

CSS

.grouping-container{ 
    position:relative; 
    width:100%; 
    max-width: 70%; 
    margin: 30px auto; 
    padding: 15px 15px 50px 15px; 
    box-sizing: border-box; 
    background: #ccc; 
} 
.headingContainer,.heading-container{ 
    width: 90%; 
    max-width: 85%; 
    margin: 5px auto; 
    background: rgba(35, 122, 197, 0.4); 
    padding: 5px 25px 50px 25px 
} 
.headingContainer p,.heading-container p{ 
    font-size: 25px; 
} 
.headingContainer:before{ 
    content: ""; 
    border-top: 1px solid red; 
    padding: 0 25px; 
    position: absolute; 
    left: 34px; 
    margin-top: -6px; 

} 
.heading-container:before{ 
    content: ""; 
    border-bottom: 1px solid red; 
    padding: 0 24px; 
    position: absolute; 
    left: 33px; 
    bottom: 55px; 
} 
.groupBadge{ 
width: 108px; 
    height: 30px; 
    padding: 18px 120px; 
    display: inline-block; 
    background: #7ecaca; 
    transform: rotate(90deg); 
    position: absolute; 
    bottom: 43%; 
    left: -217px; 
} 
.groupBadge:before{ 
content: ""; 
    position: absolute; 
    padding: 5px 105px; 
    border-top: 1px solid red; 
    left: 100%; 
} 
.groupBadge:after{ 
    content: ""; 
    position: absolute; 
    padding: 5px 105px; 
    color: red; 
    border-top: 1px solid red; 
    right: 100%; 
    bottom: 7px; 
} 
.groupBadge h4{ 
    margin-top: -10px; 
    transform: rotate(180deg); 
    padding-right: 36px; 
} 

Answer 1

這是一個靈活的響應方法使用僞css元素。

這是怎樣的結構工作：

水平線（頂部和底部） -

使用div grouping-container我提出的頂部和底部水平綠線與after and before pseudo元素。

.grouping-container:after { 
    content: ''; 
    background: green; 
    width: 40px; 
    height: 1px; 
    left: -40px; 
    position: absolute; 
    top: 0px; 
} 

.grouping-container:before { 
    content: ''; 
    background: green; 
    width: 40px; 
    height: 1px; 
    left: -40px; 
    position: absolute; 
    bottom: 0px; 
} 

垂直線 -

對於垂直線我已經包裹在更更DIV元素與僞CSS產生綠垂直線之前使用哪個類FauxElementline。

.FauxElementline:before { 
    content: ''; 
    background: green; 
    width: 1px; 
    height: 100%; 
    left: -40px; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
} 

.grouping-container { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 70%; 
 
    margin: 30px auto; 
 
    padding: 15px 15px 50px 15px; 
 
    box-sizing: border-box; 
 
    background: #ccc; 
 
} 
 

 
.headingContainer, 
 
.heading-container { 
 
    width: 90%; 
 
    max-width: 85%; 
 
    margin: 5px auto; 
 
    background: rgba(35, 122, 197, 0.4); 
 
    padding: 5px 25px 50px 25px 
 
} 
 

 
.headingContainer p, 
 
.heading-container p { 
 
    font-size: 25px; 
 
} 
 

 
.groupBadge { 
 
    width: 50px; 
 
    height: 180px; 
 
    display: inline-block; 
 
    background: #7ecaca; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -90px; 
 
    left: -65px; 
 
} 
 

 
.groupBadge h4 { 
 
    margin-top: 75px; 
 
    transform: rotate(270deg) 
 
} 
 

 
.FauxElementline:before { 
 
    content: ''; 
 
    background: green; 
 
    width: 1px; 
 
    height: 100%; 
 
    left: -40px; 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
} 
 

 
.grouping-container:after { 
 
    content: ''; 
 
    background: green; 
 
    width: 40px; 
 
    height: 1px; 
 
    left: -40px; 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 

 
.grouping-container:before { 
 
    content: ''; 
 
    background: green; 
 
    width: 40px; 
 
    height: 1px; 
 
    left: -40px; 
 
    position: absolute; 
 
    bottom: 0px; 
 
}

<div class="grouping-container"> 
 
    <div class="FauxElementline"> 
 

 

 
    <span class="groupBadge"><h4>Group1</h4></span> 
 
    <div class="headingContainer"> 
 
     <h1>Heading 1</h1> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> 
 
    </div> 
 
    <div class="heading-container"> 
 
     <h1>Heading 2</h1> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    </div> 
 
</div>