部分的な縦線を余白付きの部分区切り

Question

テキストを含む3つのdivにマージンを設定するだけで、このデザインを実現できますか？ PLSラインはhttps://codepen.io/anon/pen/zzRXLM

html, body, div, span, applet, object, iframe, 
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 
a, abbr, acronym, address, big, cite, code, 
 
del, dfn, em, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
b, u, i, center, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td, 
 
article, aside, canvas, details, embed, 
 
figure, figcaption, footer, header, hgroup, 
 
menu, nav, output, ruby, section, summary, 
 
time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, 
 
footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
body { 
 
\t line-height: 1; 
 
} 
 
ol, ul { 
 
\t list-style: none; 
 
} 
 
blockquote, q { 
 
\t quotes: none; 
 
} 
 
blockquote:before, blockquote:after, 
 
q:before, q:after { 
 
\t content: ''; 
 
\t content: none; 
 
} 
 
table { 
 
\t border-collapse: collapse; 
 
\t border-spacing: 0; 
 
} 
 

 
body { 
 
    font-family: Roboto, Helvetica, Arial, Sans-Serif; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    width:600px; 
 
    margin-top:20px; 
 
} 
 

 
.child{ 
 
    flex: 1; 
 
    text-align: center; 
 
    padding:0px 15px; 
 
    border-right: 1.2px solid #ccc; 
 
}

<div class="container"> 
 
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div> 
 
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div> 
 
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div> 
 
</div>

Answer 1

私が使用することをお勧めします：

.child{ 
    flex: 1; 
    text-align: center; 
    padding:0px 15px; 
    position:relative; /* add this */ 
} 
.child:after { 
    content: ' '; 
    position: absolute; 
    border-right: 1.2px solid #ccc; 

    /* use one of these blocks */ 
    height: 80%; 
    top: 10%; 
    /* or 
    top:20px; 
    bottom:20px; 
    */ 
    right: 0; 
} 

/* use this rule if you dont want line for last div */ 
.child:last-child:after{ 
    display:none 
} 

https://codepen.io/FaridNaderi/pen/qjxGZd

Answer 2

ラインの小さなPNGイメージすることを検討し、それらを分離するためにそれを使用

のdivほど高くないことに注意してください。次に、あなたが望む任意の長さにすることができます。次に、新しいCSS3の表示：グリッド機能を使用して3つの列を作成します。

display: grid; 
grid-template-columns: 75px 75px 75px; 
grid-template-rows: 50px; 

表示：グリッドの使用方法は、https://gridbyexample.com/を参照してください。

Answer 3

した後は、それが.child内の擬似::afterなどの要素と絶対位置を使用することができ、疑似要素が残っているので、相対的な位置に.childを設定してください内部は.childです。次に、境界の開始位置を上または下からどれくらい調整するかを調整します。私はpxを使用しましたが、%のような相対的な単位も機能します。私は彼だと思う

body { 
 
    font-family: Roboto, Helvetica, Arial, Sans-Serif; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    width: 600px; 
 
    margin-top: 20px; 
 
} 
 

 
.child{ 
 
    flex: 1; 
 
    text-align: center; 
 
    padding: 0px 15px; 
 
    position: relative; 
 
} 
 

 
.child::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 0; 
 
    bottom: 15px; 
 
    border: 1px solid indianred; 
 
}

<div class="container"> 
 

 
    <div class="child"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 
 
    </div> 
 
    <div class="child"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 
 
    </div> 
 
    <div class="child"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 
 
    </div> 
 

 
</div>