क्या कोई कृपया मुझे सभी नीले 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>
0
Yetimwork Beyene
12 नवम्बर 2011, 22:46
1 उत्तर
सबसे बढ़िया उत्तर
मैं बाएँ स्तंभ <div>s और दाएँ स्तंभ <div>s को लपेटने के लिए 2 स्तंभ <div> तत्व बनाऊंगा।
1
Lucas
12 नवम्बर 2011, 22:51
<table>का उपयोग सारणीबद्ध डेटा के लिए करना चाहिए, लेआउट तंत्र के रूप में नहीं।