Çözüldü Yan yana mobil uyumlu kutular yapmak

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
sevilay06

sevilay06

Decapat
Katılım
18 Nisan 2020
Mesajlar
9
Daha fazla  
Cinsiyet
Erkek
Merhaba örnekteki gibi sitemde yan yana mobil uyumlu kutular oluşturmak istiyorum. CSS'in de kutuların oldugu sayfada vermek istiyorum. Nasıl düzenleyebilirim?
Örnek:

Askeriye - CENOVA

NVR,Kamera,Network IP Kamera,Network NVR Server,Storage,AHD DVR,Mobil NVR ,Mobil DVR
www.cenova.com.tr www.cenova.com.tr


Ana kodlar
Kod: 
<html>

<head>

<div class="pt-5 mt-md-2">

<title>İzmir Buca İl Jandarma K</title>
</head>

<body>
<div class="pt-5 mt-md-2">

<div id="ctl00_body_blog_kutular" class="cz-masonry-grid shuffle" data-columns="4">
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>
<p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660567412279451-b.png" alt="G.Antep İslahiye Mülteci Kampı">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">G.Antep İslahiye Mülteci Kampı</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660565795546241-b.png" alt="Hatay İl Jandarma Kom.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Hatay İl Jandarma Kom.</h2>
<p class="font-size-sm">Cenova ve Foshvision Ürünleri Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660565795546241-b.png" alt="Manisa Kırkağaç Jandarma K.K.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Manisa Kırkağaç Jandarma K.K.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660565795546241-b.png" alt="Kırşehir Akpınar Jandarma K.K.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Kırşehir Akpınar Jandarma K.K.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660580242290057-b.png" alt="İzmir Jet Hava Üssü">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İzmir Jet Hava Üssü</h2>
<p class="font-size-sm">GVD Ürünleri Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660580242290057-b.png" alt="İzmir Jet Hava Üssü">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İzmir Jet Hava Üssü</h2>
<p class="font-size-sm">GVD Ürünleri Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660580242290057-b.png" alt="İstanbul HKK Jet Hava Üssü">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul HKK Jet Hava Üssü</h2>
<p class="font-size-sm">GVD Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660580242290057-b.png" alt="Konya Jet Hava Üssü">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Konya Jet Hava Üssü</h2>
<p class="font-size-sm">GVD Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660609555570844-b.png" alt="Ankara İstihbarat Okulu Hakkı Çelik Kışlası">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Ankara İstihbarat Okulu Hakkı Çelik Kışlası</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660610894956250-b.png" alt="İstanbul Marmara ve Boğazlar Grup Kom.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul Marmara ve Boğazlar Grup Kom.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660610894956250-b.png" alt="Çanakkale Marmara ve Boğazlar Grup Kom.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Çanakkale Marmara ve Boğazlar Grup Kom.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660609555570844-b.png" alt="İstanbul Milli İstihbarat">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul Milli İstihbarat</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660635054054637-b.png" alt="Ankara Mebs Okulu Eği. ve Merk. Kom.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Ankara Mebs Okulu Eği. ve Merk. Kom.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660636562904362-b.png" alt="Ankara Sincan OSB/SİHA Test Merkezi">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Ankara Sincan OSB/SİHA Test Merkezi</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660559956954238-b.png" alt="Ş.Urfa Akçakale Mülteci Kampı">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Ş.Urfa Akçakale Mülteci Kampı</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660638063851785-b.png" alt="Ankara Milli Sav. Bak. Teknik İşler Daire Baş.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Ankara Milli Sav. Bak. Teknik İşler Daire Baş.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660638063851785-b.png" alt="Milli Sav. Bak. Kültür ve Sos. Hiz. Şube Müd.">
 <div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Milli Sav. Bak. Kültür ve Sos. Hiz. Şube Müd.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660639236995955-b.png" alt="İstanbul Boğaz Sahil Güv. Kom.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul Boğaz Sahil Güv. Kom.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660639236995955-b.png" alt="Bursa Gemlik Sahil Güv. Kom.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Bursa Gemlik Sahil Güv. Kom.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660639236995955-b.png" alt="Çanakkale Boğaz Sahil Güv. Kom.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Çanakkale Boğaz Sahil Güv. Kom.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660641398744748-b.png" alt="Çankırı Modelsan Savunma Havacılık San A.Ş.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Çankırı Modelsan Savunma Havacılık San A.Ş.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660676622969693-b.png" alt="Çankırı 28. MKNZ P.Tug.Kom. Ordu Evi">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Çankırı 28. MKNZ P.Tug.Kom. Ordu Evi</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660678772661772-b.png" alt="Ş.Urfa Emniyet Müdürlüğü">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Ş.Urfa Emniyet Müdürlüğü</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660681176187667-b.png" alt="Adıyaman E-Tipi Cezaevi">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Adıyaman E-Tipi Cezaevi</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="İstanbul Bayrampaşa İlçe Emniyet">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul Bayrampaşa İlçe Emniyet</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="Bursa Nilüfer İlçe Emniyet">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Bursa Nilüfer İlçe Emniyet</h2>
<p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="Bursa Görükle İlçe Emniyet">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Bursa Görükle İlçe Emniyet</h2>
<p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="Diyarbakır Çüngüş İlçe Emniyet">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Diyarbakır Çüngüş İlçe Emniyet</h2>
<p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="Ardahan İlçe Emniyet">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Ardahan İlçe Emniyet</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660691396434321-b.png" alt="İstanbul Emniyet İlçe İkmal Müd.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul Emniyet İlçe İkmal Müd.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660693511400733-b.png" alt="Diyarbakır TRT Bölge Müd.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Diyarbakır TRT Bölge Müd.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="Diyarbakır Emniyet Kriminali">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Diyarbakır Emniyet Kriminali</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="Diyarbakır Hani Emniyet Müd. Mobese">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Diyarbakır Hani Emniyet Müd. Mobese</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="Erzurum Aşkale İlçe Emniyet">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Erzurum Aşkale İlçe Emniyet</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="İstanbul Gaziosmanpaşa İlçe Emniyet">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul Gaziosmanpaşa İlçe Emniyet</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="İstanbul Emniyet Müd. Terörle Mücadele">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul Emniyet Müd. Terörle Mücadele</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660702456847065-b.png" alt="Kars İl Emniyet Müdürlüğü">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Kars İl Emniyet Müdürlüğü</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660748601384995-b.png" alt="İstanbul Arnavutköy Polis Mes. Eğ. Mer.">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">İstanbul Arnavutköy Polis Mes. Eğ. Mer.</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660687896933692-b.png" alt="Adıyaman Kahta EGM">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Adıyaman Kahta EGM</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660750287357571-b.png" alt="Çanakkale Şehitlik">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Çanakkale Şehitlik</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>
</div>
</article>
<article class="grid-item">
<div class="card">
<img class="card-img-top" src="/img/upl/132660676622969693-b.png" alt="Çankırı 28. Mknz.P.Tug.Kom.Orduevi">
<div class="card-body">
<h2 class="h6 blog-entry-title font-weight-bold">Çankırı 28. Mknz.P.Tug.Kom.Orduevi</h2>
<p class="font-size-sm">Cenova Ürünler Kullanılmıştır.</p>
</div>

</body>

</html>
 
Son düzenleyen: Moderatör:
Çözüm
dgknbzglu
HTML: 
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

</head>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 row-cols-xxl-4">

              

    <div class="col">

        <div class="card">

            <img class="card-img-top" src="https://www.cenova.com.tr/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">

            <div class="card-body">

                <h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>

                <p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>

            </div>

        </div>

    </div><!-- col bitiş-->
  
  <div class="col">

        <div class="card">

            <img class="card-img-top" src="https://www.cenova.com.tr/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">

            <div class="card-body">

                <h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>

                <p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>

            </div>

        </div>

    </div><!-- col bitiş-->
  
  <div class="col">

        <div class="card">

            <img class="card-img-top" src="https://www.cenova.com.tr/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">

            <div class="card-body">

                <h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>

                <p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>

            </div>

        </div>

    </div><!-- col bitiş-->
  
  <div class="col">

        <div class="card">

            <img class="card-img-top" src="https://www.cenova.com.tr/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">

            <div class="card-body">

                <h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>

                <p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>

            </div>

        </div>

    </div><!-- col bitiş-->
  
  

              

</div><!--row bitiş-->

"col" classlı divi "row" classlı div içerisinde kaç tane eklersen, mobil uyumlu halde sayfa küçüldükçe 1 adede kadar alt alta gelecek.
Bu da örneği : CodePen.io
Tarihe göre sırala Puana göre sırala
HTML: 
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

</head>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 row-cols-xxl-4">

              

    <div class="col">

        <div class="card">

            <img class="card-img-top" src="https://www.cenova.com.tr/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">

            <div class="card-body">

                <h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>

                <p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>

            </div>

        </div>

    </div><!-- col bitiş-->
  
  <div class="col">

        <div class="card">

            <img class="card-img-top" src="https://www.cenova.com.tr/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">

            <div class="card-body">

                <h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>

                <p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>

            </div>

        </div>

    </div><!-- col bitiş-->
  
  <div class="col">

        <div class="card">

            <img class="card-img-top" src="https://www.cenova.com.tr/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">

            <div class="card-body">

                <h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>

                <p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>

            </div>

        </div>

    </div><!-- col bitiş-->
  
  <div class="col">

        <div class="card">

            <img class="card-img-top" src="https://www.cenova.com.tr/img/upl/132660565795546241-b.png" alt="İzmir Buca İl Jandarma K.K.">

            <div class="card-body">

                <h2 class="h6 blog-entry-title font-weight-bold">İzmir Buca İl Jandarma K.K.</h2>

                <p class="font-size-sm">Cenova ve GVD Ürünleri Kullanılmıştır.</p>

            </div>

        </div>

    </div><!-- col bitiş-->
  
  

              

</div><!--row bitiş-->

"col" classlı divi "row" classlı div içerisinde kaç tane eklersen, mobil uyumlu halde sayfa küçüldükçe 1 adede kadar alt alta gelecek.
Bu da örneği : CodePen.io
 
Artı 0 Eksi
Çözüm
Çok tşk ederim, merhaba aşagıdaki kodu yan yana 3 tane ve alt alta 10 satır olacak şekilde ve mobildede alt alta tek tek sıralanacak şekilde nasıl yapabilirim

----------------------------------------------------------------------------------------------
<table border="0" width="330" cellspacing="1">
<tbody><tr>
<td><p align="center"><img src="https://ugurguvenlikankara.com/image/catalog/referanslar/Ankara-Altindag-Belediyesi.png" style="width: 265px; height: 95px; float: left;"><br></p></td>
</tr>
<tr>
<td>
<p align="center"><span style="color: rgb(55, 63, 80);"><font face="Helvetica"><span style="font-size: 14px;">
Ankara Altındağ Belediyesi</span></font></span></p></td>
</tr>
</tbody></table>
 
Son düzenleme:
Artı 0 Eksi
sevilay06 dedi:
Çok tşk ederim, merhaba aşagıdaki kodu yan yana 3 tane ve alt alta 10 satır olacak şekilde ve mobildede alt alta tek tek sıralanacak şekilde nasıl yapabilirim

----------------------------------------------------------------------------------------------
<table border="0" width="330" cellspacing="1">
<tbody><tr>
<td><p align="center"><img src="https://ugurguvenlikankara.com/image/catalog/referanslar/Ankara-Altindag-Belediyesi.png" style="width: 265px; height: 95px; float: left;"><br></p></td>
</tr>
<tr>
<td>
<p align="center"><span style="color: rgb(55, 63, 80);"><font face="Helvetica"><span style="font-size: 14px;">
Ankara Altındağ Belediyesi</span></font></span></p></td>
</tr>
</tbody></table>
Genişletmek için tıkla...
Üstte verdiğim örnekteki "col" divlerinin arasına ne isterseniz yapıştırın. İstediğiniz hale gelecektir.
Yine de linki güncelledim bakabilirsin:
CodePen.io
 
Artı 0 Eksi

Benzer konular

P
Web programlamada kutular nasıl yan konur?
Mesaj
3
Görüntüleme
334
polS
P
I
DataTable Liste Yan Yana Geliyor
Mesaj
1
Görüntüleme
202
dgknbzglu
dgknbzglu
ErrorCorrection
  • Çözüldü
Çözüldü  CSS yazılar yan yana gelmiyor
3 4 5
Mesaj
41
Görüntüleme
3B
Eray T
Eray T
TeknoEmir
  • Soru
CSS elemanları yan yana sıralama
Mesaj
7
Görüntüleme
314
RaSGooL
RaSGooL
jevousaime
  • Çözüldü
Çözüldü  İki H1 etiketini yan yana yazabilmek
Mesaj
7
Görüntüleme
189
jevousaime
jevousaime

Yeni konular

Yeni mesajlar

Geri
Yukarı