सीएसएस के साथ इस लेआउट प्रभाव को पुन: पेश करने का तरीका?

Question

1 पिक्सेल छवि के साथ 7 कॉलम/3 पंक्ति तालिका बनाने का छोटा, जिसे लाइनों को अनुकरण करने के लिए विस्तारित किया जा सकता है, यह लेआउट बिना किसी तालिका के "HTML" और "डिवाइडर" के लिए छवि का उपयोग करके पुन: उत्पन्न किया जा सकता है?

मुझे इसके बारे में वास्तव में क्या पसंद है यह है कि रेखाएं कैसे छेड़छाड़ नहीं करती हैं।

<!-- layout reproduced --> 
 
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%"> 
 
    <TR ALIGN="center"> 
 
     <TD CLASS="boldedcolor4text">the first</TD> 
 
     <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD> 
 
     <TD CLASS="boldedcolor4text">the second</TD> 
 
     <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD> 
 
     <TD CLASS="boldedcolor4text">the third</TD> 
 
     <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD> 
 
     <TD CLASS="boldedcolor4text">the fourth</TD> 
 
    </TR> 
 
    <TR ALIGN="center"> 
 
     <TD COLSPAN="7"><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="520" HEIGHT="1"></TD> 
 
    </TR> 
 
    <TR ALIGN="center"> 
 
     <TD><A CLASS="image" HREF="><IMG SRC="1.jpg" ALT="" BORDER="0"></A></TD> 
 
     <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD> 
 
     <TD><A CLASS="image" HREF="><IMG SRC="2.jpg" ALT="" BORDER="0"></A></TD> 
 
     <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD> 
 
     <TD><A CLASS="image" HREF="><IMG SRC="3.jpg" ALT="" BORDER="0"></A></TD> 
 
     <TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD> 
 
     <TD><A CLASS="image" HREF="><IMG SRC="4.jpg" ALT="" BORDER="0"></A></TD> 
 
    </TR> 
 
</TABLE>

Answer 1

आप इसे पसंद की कोशिश कर सकते: https://jsfiddle.net/wh48rjvt/

एससीएसएस:

$border: 1px solid grey; 
.table-row { 
    border-bottom: $border; 
    &:last-child { 
    border-bottom: 0; 
    } 
    .table-box { 
    border-right: $border; 
    margin: 0.75rem 0; 
    &:last-child { 
     border-right: 0; 
    } 
    } 
} 

इस सीएसएस निम्नलिखित बनाता है:

0,123,

.table-row { 
    border-bottom: 1px solid grey; 
} 
.table-row:last-child { 
    border-bottom: 0; 
} 
.table-row .table-box { 
    border-right: 1px solid grey; 
    margin: 0.75rem 0; 
} 
.table-row .table-box:last-child { 
    border-right: 0; 
} 

HTML:

<div class="container"> 
    <div class="table-row row"> 
    <div class="table-box col-xs-3">1</div> 
    <div class="table-box col-xs-3">2</div> 
    <div class="table-box col-xs-3">3</div> 
    <div class="table-box col-xs-3">4</div> 
    </div> 
    <div class="table-row row"> 
    <div class="table-box col-xs-3">5</div> 
    <div class="table-box col-xs-3">6</div> 
    <div class="table-box col-xs-3">7</div> 
    <div class="table-box col-xs-3">8</div> 
    </div> 
    ... 
</div> 

और मैं ग्रिड के लिए बूटस्ट्रैप का इस्तेमाल किया।

Answer 2

मेरे समाधान के लिए कोई निर्भरता नहीं। मैं एक फ्लेक्सबॉक्स .container और फिर चार फ्लेक्स .item एस बनाते हैं। फ्लेक्सबॉक्स के लिए डिफ़ॉल्ट दिशा row है, जो हम बाहरी लेआउट के लिए चाहते हैं, लेकिन पंक्ति में प्रत्येक आइटम की सामग्री के लिए नहीं। इसे समायोजित करने के लिए, मैंने flex-direction बच्चों (.item) को column में बदल दिया है, उदाहरण के बाद, छवियों को एंकरों के नीचे रखा गया है।

एंकरों और छवियों के बीच गैर-ब्रेकिंग सीमा के लिए, मैंने थोड़ा शॉर्टकट लिया और शैलियों को छद्म वर्ग में ले जाया। .item पर position: relative; पर ध्यान दें। यह एक सुरक्षित कंटेनर बनाने के लिए किया गया था जिसमें को पूरी तरह से स्थित छद्म वर्ग सीमाओं को पकड़ें।

.container, .item { 
 
    display: flex; 
 
} 
 

 
.item { 
 
    flex-direction: column; 
 
    position: relative; 
 
} 
 

 
.item:before { 
 
    content: ''; 
 
    border-top: 1px solid; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 2em; 
 
} 
 

 
.item:first-child:before { 
 
    left: 1.5em; 
 
} 
 

 
.item:last-child:before { 
 
    left: -1.5em; 
 
} 
 

 
.item:last-child .link, 
 
.item:last-child .img { 
 
    border-right: none; 
 
} 
 

 
.link, 
 
.img { 
 
    border-right: 1px solid; 
 
} 
 

 
.link { 
 
    text-align: center; 
 
} 
 

 
.img { 
 
    margin-top: 2em; 
 
    padding: 0.5em 1em 0.5em; 
 
}

<div class="container"> 
 
    <div class="item"> 
 
    <a class="link" href="">link 1</a> 
 
    <img class="img" src="http://placehold.it/100x130" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
    <a class="link" href="">link 2</a> 
 
    <img class="img" src="http://placehold.it/100x130" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
    <a class="link" href="">link 3</a> 
 
    <img class="img" src="http://placehold.it/100x130" alt="" /> 
 
    </div> 
 
    <div class="item"> 
 
    <a class="link" href="">link 4</a> 
 
    <img class="img" src="http://placehold.it/100x130" alt="" /> 
 
    </div> 
 
</div>

फिडल: https://jsfiddle.net/1sbx2h5e/