0
Kayıt Ol

Bunu HTML nasıl yaparız 3 Sütun

5

●

616

  • 16-09-2017, 05:07:57
    #1
    rafet55
    rafet55
    bunu HTML nasıl yaparız
  • 17-09-2017, 11:22:18
    #3
    rafet55
    rafet55
    hocam ben acemiyim çok anlamıyorum

    sitemin en altına yan yana 6 sütunluk bir bölüm yapıp buraya otomobil modellerini koyacağım mesela resim atim size daha iyi anlatırım

  • 17-09-2017, 11:31:03
    #4
    LitmuS
    LitmuS
    Bu şekilde bir önek ile yapabilirsiniz.
    <!DOCTYPE html>
<html>
<head>
<style>
.r10LitmuS {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>

<div class="r10LitmuS">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>
    Sütunlar arasında çizgi olsun daha farklı görünsün istersende aşağıdaki şekilde düzenleme yapman gerekicektir.
    http://prntscr.com/gm572q

    <!DOCTYPE html>
<html>
<head>
<style>
.r10LitmuS {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule-style property.</p>

<div class="r10LitmuS">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>
    http://prntscr.com/gm56zw
    solid olan alanlardaki gerekli düzenlemeleri(örneğin dotted, double, dashed gibi) yaparak sütun aralarındaki görünümü değiştirebilirsin
  • 17-09-2017, 19:51:50
    #5
    LitmuS
    LitmuS
    Hallettin mi?
  • 18-09-2017, 00:17:44
    #6
    rafet55
    rafet55
    LitmuS adlı üyeden alıntı: mesajı görüntüle
    Hallettin mi?
    hocam çok teşekkür ederim günlerdir gözüme uyku girmiyordu bu sütun olayından idrak etmem biraz zor oldu sonra kavradım kendime özgü kullandım teşekkürler verdiğiniz bilginin bedelini ödemez gerçi ama size r10+ verdim sağolun kodunuza sağlık

    Özellikle ikincisi çıbıklı olan çok güzel oldu siteye teşekkür ederim tekrardan hep sitenin altına sütunlu bir şey yapmayı düşünüyordum bir kod bulmuştum sizinkisi gibi muntazam değildi sonra sizin kod imdata yetişti şimdi konu eklerken yeni tasarlayacağım şablonada ekleyeceğim