7
इस स्वरूपण को सही करने के साथ एक समय का एक बिल्ली होने के कारण किसी भी विचार की सराहना की जाएगी। हमारे पास foos से संबंधित जानकारी का एक गुच्छा है जिसे हम एक साथ समूहीकृत रखना चाहते हैं। तो अगर हमारे पास फूस का एक गुच्छा एक दूसरे के बगल में सूचीबद्ध है, यदि वह तत्व foos लपेटने का कारण बनता है, तो पूरे foo एक साथ रहेंगे। स्वरूपण भी दिखना चाहिए: तो पाठ बाईं ओर है और संख्याएं दाईं ओर हैं।सीएसएस स्वरूपण को एक साथ रखने के लिए
|-----------------------------------------------------|
|[icon] Brad (human) [pic] (2) [pic] (3)|
|-----------------------------------------------------|
तो मुख्य आइकन तो (प्रत्येक के लिए सीएसएस एम्बेडेड माउस के साथ) नाम और मॉडल सबसे बाईं ओर है, और फिर सही गठबंधन है भाई बहन, और बच्चों के।
प्रत्येक foo हो सकता है निम्नलिखित:
foo.id = 12345
foo.name = 'brad'
foo.model = 'human'
foo.image = ''
foo.kids = 3
foo.siblings = 2
foo.link = ''
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>none</title>
<style type="text/css" >
body
{
margin: 0;
padding: 0;
min-width: 850px;
text-align: left;
line-height: 28px;
font-size: 14px;
font-family: Verdana,Tahoma,Arial;
}
#content
{
width: 800px;
border: solid 1px #000000;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
div.foo
{
display: inline;
min-width: 250px;
width: 250px;
border: dotted 1px #b8b8b8;
padding: 0px 15px 0px 0px;
vertical-align: middle;
}
.foo .id
{
display: none;
}
.foodata
{
display: inline;
text-align: left;
white-space: nowrap;
margin: 2px 2px 2px 2px;
}
.fooname
{
display: inline;
min-width: 80px;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
}
.foomodel
{
display: inline;
min-width: 80px;
color: #000000;
font-size: 12px;
}
.foocounts
{
min-width: 90px;
text-align: right;
display: inline;
}
.foosiblings
{ /* add in image for children */
background: url(../../images/siblings.png) no-repeat 4px 10%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fookids
{ /* add in image for connection */
background: url(../../images/kids.png) no-repeat 4px 25%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fooimage
{
display: inline;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="content" >
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Brad</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(3)</span>
<span class="fookids" >(2)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Tom</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(1)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Harry</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(6)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Sally</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Peggy</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(12)</span>
<span class="foosiblings" >(16)</span>
</span>
</a>
</div>
</div>
</body>
</html>महत्वपूर्ण हिस्सा मैं में एक साथ पूरे foo रखने के लिए, चाहते हैं एक बड़ा हिस्सा क्योंकि मैं इस संरचना का उपयोग करता हूं ओ ओ पेज पेज यदि आवश्यक हो तो foo की संरचना बदल सकती है, मेरे पास पूर्ण नियंत्रण है।
यदि आप मेरा उदाहरण देखते हैं तो पाठ (नाम, आइकन, मॉडल) को गठबंधन छोड़ दिया जाता है, जबकि गणना (बच्चों, भाई बहन) को पूरी तरह से div.foo –
पर गठबंधन किया जाता है, तो आप शायद " टेबल खराब हैं "। वे * लेआउट * के लिए केवल ** खराब हैं, * टैब्यूलर डेटा * की प्रस्तुति के लिए नहीं। – BalusC
मुझे नहीं लगता था कि यह सारणीबद्ध डेटा है क्योंकि यह केवल एक पंक्ति है। इसे तेजी से और आसान टेबल मार्कअप (अगर कोई रास्ता है) के बजाय इसे अर्थपूर्ण रूप से सही करने की कोशिश कर रहा है। –