मैं एक 70% चौड़ाई के साथ एक तत्व है, और यह 30% चौड़ाई के साथ एक तत्व के बगल में चल रहा है, लेकिन जब मैं गद्दी की 25px जोड़ने यह तत्व का विस्तार और प्रारूप टूट जाता है, वहाँ यह सिर्फ बढ़ाने बनाने के लिए किसी भी तरह से है सामग्री को किनारे से दूरी के रूप में बस इसे बड़ा बनाने के विरोध में?तत्व को बड़ा बनाने से पैडिंग रखें?
आप border-box मॉडल का उपयोग करते हैं, गद्दी बॉक्स का आकार में शामिल है। विवरण के लिए here देखें।
<!DOCTYPE html>
<html>
<head>
<title>padding example</title>
<style type="text/css">
.seventy {
display: block;
float: left;
width: 70%;
background-color: red;
}
.thirty {
display: block;
float: left;
width: 30%;
padding: 25px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: green;
}
</style>
</head>
<body>
<div class="seventy">Stuff</div>
<div class="thirty">More Stuff</div>
</body>
</html>
हालांकि corrext बॉक्स आकार के लिए समर्थन थोड़ा अधूरा है। चौड़ाई में से एक से थोड़ा प्रतिशत लेने और इसे पैडिंग में जोड़ने पर विचार करें। तो आपकी 2 चौड़ाई + पैडिंग = 100%। संपादित करें ~ जेता टॉस समाधान 25px का अंतर गारेन करेगा जो एक बेहतर समाधान होगा। – sweetroll
@codelark मैं -webkit की जरूरत है और -moz करते हैं? – DBS
मैं (मुझे लगता है कि हो सकता है यह एक div है?) ऐसी ही दूसरी तत्व तत्व के अंदर बना सकते हैं और सेट है कि एक 25px की पैडिंग/मार्जिन के लिए होगा।
उदाहरण के लिए:
<div id="wrapper">
<div id="width30">
</div>
<div id="width70">
<div id="padding25">
Acctual content here.
</div>
</div>
</div>
</div>
में से कुछ यह एक सुपर स्मार्ट समाधान लोगों को और अधिक के खाते में ले जाना चाहिए करते हैं। कोई अधूरा सीएसएस हैक्स, कोई संभावित असमर्थित ब्राउज़र है, और यह एक साफ़ कंटेनर-सामग्री का अनुसरण करता है। कुछ KISS सीएसएस (CISS?) को देखने के लिए के बाद से यह अति-इंजीनियर करना बहुत आसान है खुशी। – Nol
देखते हैं अपने कोड –