क्या कोई कृपया मुझे सभी नीले divs को बाईं ओर लाइनअप करने में मदद कर सकता है और सभी लाल divs को float संपत्ति का उपयोग करके बाईं ओर फ़्लोट कर सकता है। नीचे दी गई तस्वीर को इस प्रश्न के लक्ष्य की व्याख्या करनी चाहिए। अग्रिम में धन्यवाद।

उदाहरण के लिए,

                  -------------            --------------- 
                  |  left Top |            |  right Top  |
                  -------------            ---------------

                  ---------------          ----------------
                  | left Middle |          | right Middle |
                  ---------------          ----------------

                  ---------------------    ----------------------
                  |     left Bottom   |    |     right Bottom   |
                  ---------------------    ----------------------   

यहाँ सीएसएस और एचटीएमएल कोड है:

 <?xml version="1.0" encoding="UTF-8" ?>
 <!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" xml:lang="en" lang="en">
 <head>
    <meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
    <title>Through the Looking-Glass</title>
 <style>

 #container
 {
height: 798px;
width: 1300px;
    margin-left: auto;
margin-right: auto;
    background-color: black;
 }

 #leftTop 
 {
   background-color: blue;
   width: 200px;
   float: left;
   height: 40px;
   color: white;
 }

 #rightTop
 {
   background-color: red;
   width: 200px;
   height: 40px;
   float: left;
   clear: right;
   color: white;
 }
   #leftMiddle
 {
   background-color: blue;
   width: 600px;
   height: 40px;
   float: left;
   clear: right; 
   top: 10px;
   color: white;
   border: 1px solid white;
 }
 #rightMiddle
 {
   background-color: red;
   width: 600px;
   float: left;
   height: 40px;
   margin-top: 10px;
   color: white;
 }
 #leftBottom
 {
   background-color: blue;
   width: 600px;
   float: left;
   height: 400px;
   color: white;
 }
 #rightBottom
 {
   background-color: red;
   width: 600px;
   float: left;
   height: 400px;
   color: white;
 }
 </style>

 </head>
 <body>
 <div id="container">
                    <div id="leftTop"> Left Top</div>
                <div id="rightTop"> Right Top</div>
                        <div id="leftMiddle"> Left Middle</div>
                <div id="rightMiddle"> Right Middle</div>
                        <div id="leftBottom"> Left Bottom </div>
                        <div id="rightBottom"> Right Bottom </div>
 </div>
 </body>
 </html>
css
0
Yetimwork Beyene 12 नवम्बर 2011, 22:46

1 उत्तर

सबसे बढ़िया उत्तर

मैं बाएँ स्तंभ <div>s और दाएँ स्तंभ <div>s को लपेटने के लिए 2 स्तंभ <div> तत्व बनाऊंगा।

1
Lucas 12 नवम्बर 2011, 22:51
धन्यवाद लुकास, क्या फ्लोट संपत्ति का उपयोग कर कोई समाधान है?
 – 
Yetimwork Beyene
12 नवम्बर 2011, 22:58
एक टेबल भी ठीक काम करेगी ... और मुझे लगता है कि एक टेबल को संभालना आसान होगा। कम सीएसएस की आवश्यकता है।
 – 
bozdoz
12 नवम्बर 2011, 23:00
@bozdoz, उन्होंने स्पष्ट रूप से फ्लोट के लिए कहा। और HTML 5 के अनुरूप रहने का प्रयास करते हुए, आपको केवल <table> का उपयोग सारणीबद्ध डेटा के लिए करना चाहिए, लेआउट तंत्र के रूप में नहीं।
 – 
Lucas
12 नवम्बर 2011, 23:06
@YetimworkBeyene, यदि यह उत्तर पर्याप्त है, तो इसे उत्तर के रूप में चिह्नित करें, या आप अपने स्वयं के अधिक विस्तृत उत्तर पोस्ट कर सकते हैं और उत्तर के रूप में चिह्नित कर सकते हैं।
 – 
Lucas
12 नवम्बर 2011, 23:07
धन्यवाद लुकास, मैं आपके उत्तर के साथ काम करने में सक्षम था।
 – 
Yetimwork Beyene
12 नवम्बर 2011, 23:12