Şöyle bir tablo yapmaya çalışıyorum

özel tablo yapmaya çalışıyorum:Şöyle bir tablo yapmaya çalışıyorum

Ama bunu yaparken gitmek nasıl tam emin değilim.

Sonuç şu şekilde bakmak gerekiyordu:

Ben bir div yapma konusunda ve daha sonra gri dokulu kısmını olmaya div arka plan ayarlama ve daha sonra yaratma planlıyordu

içeriği düzenlemek için bu div içindeki bir tablo. Bu durumda bir tablo kullanıyor mu? Yoksa daha iyi bir yöntem var mı? Şimdiden teşekkürler.

kaynak

2013-06-13 Bucthree

Daha iyi yöntem, her bölüm için yalnızca div kullanmaktır. Konsepti göstermek için jsFiddle üzerinde çalışıyorum. –

ve daha sonra konteyner div içinde sola ve sağa süzülüyor? – Bucthree

Bootstrap iskele bileşenlerine bakmak isteyebilirsiniz veya her satırın div için sabit bir genişlik ayarlayabilirsiniz. Ama neyse, neden masa kullanmıyorsun? – choz

Tablo dışı bir işaretlemeye yapıştırabilirsiniz. Bugünün en iyi uygulamaları, yalnızca tablo verileri için tabloları kullanmanız gerektiğini ve bu içeriğin tablo verileri olmadığını gösterir.

Şamandıralar, satır içi satırlar ve diğerleri de dahil olmak üzere, bunu gerçekleştirmek için kullanabileceğiniz birkaç farklı yöntem vardır. Ayrıca, görüntülerin etrafına sarılmış içerikle ilgili (örneğin içerik uzunsa) dikkate alınması gereken noktalar da vardır.

Ancak, yuvarlanmanızı sağlamak için bazı örnek kodlar.

Stiller:

div.left, 
div.right { 
    width: 400px; 
    overflow: hidden; /* forces the div to clear the floated content */ 
} 

div.left img, 
div.right img { 
    border: 2px solid #888; 
} 

div.left img { 
    float: left; 
    padding-right: 20px; 
} 

div.right img { 
    float: right; 
    padding-left: 20px; 
}

html işaretleme:

İşte

<div class="left"> 
    <img src="your_image_source"><p>Lorem Ipsump dolor sit amet</p> 
</div> 
<div class="right"> 
    <img src="your_image_source"><p>Lorem Ipsum dolor sit amet</p> 
</div>

kaynak

2013-06-13 19:20:05

Harika! Çok teşekkür ederim, bu işe yaradı! – Bucthree

Daha az güzel biçimlendirme .. = daha az bayt .. – choz

Bu tam olarak neye ihtiyacınız göstermek gereken bir DEMO

olduğunu.

<body> 
    <div id="topLeft"></div> 
    <div id="topRight"></div> 
    <div id="middleLeft"></div> 
    <div id="middleRight"></div> 
    <div id="bottomLeft"></div> 
    <div id="bottomRight"right></div> 
</body> 

body { 
    height:400px; 
} 
#topLeft { 
    background-color:#000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
    float:left; 
} 
#topRight { 
    float:right; 
    background-color: #000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
} 
#middleLeft { 
    background-color:#000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
    float:left; 
} 
#middleRight { 
    float:right; 
    background-color: #000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
} 
#bottomLeft { 
    float:left; 
    background-color: #000000; 
    width:32%; 
    height:32%; 
    margin:5px; 
} 
#bottomRight { 
    float:right; 
    background-color: #000000; 
    width:65%; 
    height:32%; 
    margin:5px; 
}

Gövde bir sargı bezi ile değiştirilebilir ve uygun şekilde boyutlandırılabilir.

Code on jsFiddle

kaynak

2013-06-13 19:24:12

Masalar kullanmayanlar hakkında konuşanlar. Bunun için bir tablo kullanırdım.

<table> 
    <tr> 
    <td colspan=1><img src="yadayada"></td> 
    <td colspan=2>Lorem Ipsum...</td> 
    </tr> 
    <tr> 
    <td colspan=2>Lorem Ipsum...</td> 
    <td colspan=1><img src="yadayada"></td> 
    </tr> 
    <tr> 
    <td colspan=1><img src="yadayada"></td> 
    <td colspan=2>Lorem Ipsum...</td> 
    </tr> 
</table>

kaynak

2013-06-13 19:34:28

Bu her zaman işe yaramıyor: tarayıcılar, sütunların birleşmemiş olarak görünmemesi durumunda sütun genişliklerinin hesaplanması konusunda kafa karıştırıcı olabilir. OP'nin istediği için floaty seçeneklerinden birini kullanmak için büyük ölçüde tercih edilir. – Martha

Nefret etmeyin, sadece düzen için tabloları kullanmanın yolunu buldum ve fiyatı ödedim. Bu örnek daha fazla işaretlemeye sahiptir ve tablo olmayan bir düzenden daha az ayarlanabilir. Tablo dışı çözümle, css'nin hızlı bir hareketi, bir masa özümüyle mümkün olmayan değişiklikler yapabilir. –

Şöyle bir tablo yapmaya çalışıyorum

cevap

İlgili konular