तोड़ने वाले तत्वों का उपयोग किए बिना सीएसएस के साथ लंबवत लेआउट?

Question

वर्टिकल लेआउटसीएसएस केवल के साथ, और HTML तत्वों के साथ लागू करना संभव है?

मेरे पास एक div के अंदर divs की एक सूची है। डिफ़ॉल्ट रूप से अगला तत्व अंतिम के लिए सही है, जब दाईं ओर कोई जगह नहीं है, तो यह नीचे रखा गया है।

मैं सीएसएस शैली सेटिंग्स के साथ इसे प्राप्त करना चाहता हूं। क्या यह संभव है?

सीएसएस-केवल मेरा मतलब है, हमारे पास div और उसके बच्चों, और ऐसा नहीं कुछ भी जोड़ने विशेष तरह के रूप में द्वारा:

• लाइन तोड़ने तत्वों (<br/>, <div style="clear:both;"/>)
• यूएल टैग
• टेबल (हाँ, अभी भी प्रयोग किया, FG JSF लगभग विशेष रूप से उन पर आधारित)

तो:

<div id="menu"> 
    <a href="something1">Page 1</a> 
    <a href="something2">Page 2</a> 
    <a href="something3">Page 3</a> 
</div> 

और सीएसएस ऊर्ध्वाधर लेआउट को लागू करने:

#menu { ??? } 
#menu a { ??? } 

वहाँ एक है ??? कि मैं जो हासिल करना चाहता हूं उसे प्राप्त करने के लिए उपयोग कर सकता हूं?

Answer 1

ब्लॉक तत्वों के रूप में एंकर टैग प्रदर्शित करें।

#menu a { 
display: block; 
} 

Answer 2

क्या आपका ऐसा कुछ मतलब है?

http://jsfiddle.net/7Y9jS/

#menu { 
    width: 300px; 
} 

#menu a { 
    display: block; 
    background: #ccc; 
    color: #000; 
    padding: 10px 0; 
    text-align: center; 
    margin-bottom: 2px; 
} 


<div id="menu"> 
    <a href="something1">Page 1</a> 
    <a href="something2">Page 2</a> 
    <a href="something3">Page 3</a> 
</div> 

Answer 3

एक

#menu a { 
    display: block; 
} 

Answer 4

उपयोग नाव को सेट प्रदर्शन ब्लॉक

#menu a { 
    float:left; 
} 

छोड़ दिया और फिर अपने #menu के लिए वर्ग समूह जोड़ने

.group:before, 
.group:after { 
    content: ""; 
    display: table; 
} 
.group:after { 
    clear: both; 
} 
.group { 
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 
}