मैंने अपने divs को सामने वाले पेपर की तरह दिखने के लिए ढेर कर दिया है। मैं उन्हें प्रत्येक खंड पर पाठ रखना चाहता हूं, उन्हें अनुभागों में विभाजित करना चाहता हूं।सीमाओं पर पाठ कैसे रखें? (एचटीएमएल, सीएसएस)
लेकिन जिस तरह से मैंने अपना divs बनाया, केवल दृश्यमान भाग सीमाएं हैं। जब मैं divs में टेक्स्ट जोड़ता हूं, तो पाठ ऊपर या नीचे दिखाई देता है जहां इसे दिखाना चाहिए (क्योंकि वे अदृश्य divs पर हैं)।
असल में, मेरे divs अदृश्य हैं। मेरी सीमाएं दिखाई दे रही हैं। मुझे सीमाओं पर दिखाई देने के लिए पाठ की आवश्यकता है। लेकिन ऐसा करने के लिए, मुझे पाठ के प्रत्येक ब्लॉक के लिए पैडिंग बदलनी है। क्या सीमाओं पर पाठ डालने का कोई तरीका है? या झुका हुआ divs पाने का एक आसान तरीका है?
मैंने rotateY
की कोशिश की है, लेकिन यह केवल उन्हें कम कर देता है।
पकड़ - मैं केवल HTML और CSS का उपयोग कर सकता हूं।
यहाँ यह वर्तमान में कैसे प्रकट होता है का एक स्क्रीनशॉट है:
सीएसएस:
#slant1 {
width: 700px;
height: 225px;
background-color: white;
font-family: thorndale for vst;
font-size: 16px;
}
#slant2 {
border-top: 260px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 2600px;
width: 600px;
position: absolute;
z-index: -1;
}
#slant3 {
border-bottom: 225px solid #E6E6E6;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
font-family: thorndale for vst;
font-size: 16px;
}
#slant4 {
border-top: 225px solid #F2F2F2;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 225px;
width: 600px;
}
<!DOCTYPE html>
<html lang="en" id="Origami">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Origami</title>
<link href="discover.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Origami" />
<meta name="keywords" content="Origami">
<meta name="author" content="JojoRae" />
</head>
<body>
<div id="columnwrapper2">
<div id="slant1">
<div class="adamas1"></div> <div class="adamas"></div>
<p class="p">
</p>
</div>
<div id="slant2">
<ul class="slides">
<input type="radio" name="group3" id="img-11" checked />
<li class="slide-container">
<div class="slide">
<img src="../ei/treasure.gif" />
</div>
<div class="nav">
<label for="img-15" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
</ul>
</div>
<div id="slant3">
<div class="adamas3"></div>
<p class="p2"></p>
</div>
<div id="slant4">
</div>
</div> <!--closes columnwrapper-->
</body>
</html>
क्या आप हमें अपनी HTML संरचना दिखा सकते हैं? –
सीएसएस एचटीएमएल के साथ मिलकर काम करता है, इसलिए हालांकि सीएसएस है, एचटीएमएल क्या गुम है। क्या कोई तरीका है कि आप पृष्ठ के HTML स्रोत की प्रतिलिपि बना सकते हैं और इसे शामिल करने के लिए प्रश्न अपडेट कर सकते हैं? धन्यवाद – user454038