html - div width and height alignment for all levels of zooming -
एचटीएमएल कोड:
& lt; div class = "CorpPerformance" & gt; & Lt; div वर्ग = "पंक्ति" & gt; & Lt; div वर्ग = "डैशबोर्ड शीर्षक" & gt; 3 महीने & lt; / div & gt; & Lt; div class = "डैशबोर्डसोर" शैली = "फ़ॉन्ट-वजनः बोल्ड" & gt; & Lt; एक वर्ग = "पुनर्निर्देशित लिंक" डेटा-मापदंड-कार्पोरेट्समेरीक्रेक = "कोई नहीं" डेटा-मापदंड-कॉरपोरेट्समेरीएक्सपैड = "0" डेटा-मापदंड-ग्राहकपैकेज = "" डेटा-मापदंड-एक्सप्रेस सेवा = "" डेटा-मापदंड-रखरखाव प्लान = "" डेटा-मानदंड-मॉडलनाम = "" डेटा-मापदंड-आरस्पेंडडेट = "" डेटा-मापदंड- rspstartdate = "" डेटा-मापदंड-वॉरंटीपाए = "" डेटा-मापदंड-वर्ष-मॉडल = "" डेटा-मापदंड-विभाग = "विक्रय" डेटा [कैलेंडर तिथि]। [कैलेंडर]। [कैलेंडर महीना]] [अक्टूबर 2014] "डेटा-मापदंड - सारांश अवधि =" 3 महीने "href =" / कॉर्पोरेट / ऑफसेट सर्वेक्षण "> 950 & lt; / एक & gt; & Lt; / div & gt; & Lt; div वर्ग = "डैशबोर्ड आइकॉन" & gt; & Lt; class = "bootstrap-modal" डेटा-मापदंड-चार्ट से ग्राहकपेयी = "" डेटा-मापदंड-चार्टएक्सप्रेस सेवा = "" डेटा-मापदंड-चार्टमैटेनेंसप्लान = "" डेटा-मापदंड-चार्टमोडेलनाम = "" डाटा-मापदंड-चार्टमोडलीअर = "" डेटा-मापदंड-चार्टवार्टरिपे = "" डेटा-मापदंड-चार्ट-डिपार्टमेंट = "बिक्री" डेटा-मापदंड-चार्टमेजरनाम = "रिस्पांस डिफॉल्ट कंप्यूटशन" डेटा-मापदंड-चार्टमेजर टाइप = "स्कोर" डेटा-मापदंड-चार्टैगनाइजेशन = "" डेटा-मापदंड-चार्टपैगेटिटल = "एनएसएसआई ट्रेंड" डेटा-मापदंड-चार्ट -पोर्टपरियोड = "[संग्रह तिथि]। [कैलेंडर]। [कैलेंडर महीना] एंड कंपनी [अक्टूबर 2014]" डाटा-मापदंड-चार्टसमरीपरियोड = "3 महीने" डेटा-मापदंड-चार्टचिह्न = "एनएसएसआई" डेटा-मापदंड-चार्ट जहांतूप = "[प्रश्नावली]। [प्रश्नावली]। [प्रश्न]। Amp; amp; amp; amp; amp; [ओएफएसपी 13011]" href = "/ ट्रेंड" मॉडल-कोई-आकार नहीं = " ट्रू "ऊपरी =" एनएसएसआई रुझान "& gt; & lt; span & gt; & Lt; img src = "डेटा: image / png, बेस 64, iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHxSURBVFhH7Zg9SEJRFMcdW4QmcRI3xclNcYiGBocGB4dqMQTXdHdoFRqsoCAtJEiMKCpCHkHkECFJUNQgNqgEIQ19DIFBw8n / 8SkUPft66n31fnBArnLh / O69556roQHp8WEYSOctuhgFhBdTLN5RLndN2WxZHukNQoopFGrk9W6S1Zogu32FhofXyeFI0cBAnHy + HUqlLunh4Vn + dWfq9RcWG4 + f0sjIBnk8aZ5vcHC + kfgMz / URQolBspHIIdlsyxSLnVCl8ih / 0wRJbm9f0eSkREbjHJlMC5wkYmIiS4GAxEJbY2bzIsvEZ8w7O3vKkhCfiRVGDFYOuwMr + 1Vqtad2oonEOU1NHZAkldtj78V + h76LyedvWIjfv8uJikLfxGA1x8b2yO1O8 + qKRs / FYFeMjm5xHclkivKoePRMTKuw4qaZnj7mQioyPRETDjeFoLCKLqRF18XgGh0f3 / ty3yEKXRODnYGeQqmBEp2uiMHuQIeKnkKrqC6mVLqnoaGMpqUAVcXg + rVYlrht1zqqiMHRwfsFDZvWiqwSvxaTTF5wS6 / VIqvEj8Wcnd3yq9XlWqNq9eePNVHpKAZvGCSPY4JuFREK7fMOcTpXhXzjqEVHMQDJ45hASjR6RMGgxP + क्ष / XU + FfNf0cUo0Bajx / sw0CuzQYKdi8e4ggAAAABJRU5ErkJggg == "& gt; & Lt; / span & gt; & lt; / a & gt; & Lt; / div & gt; & Lt; div वर्ग = "कावल राष्ट्रीय" & gt; & Lt; span शैली = "रंग: #fff; फ़ॉन्ट-वजन: बोल्ड;" & gt; राष्ट्रीय & lt; / span & gt; & Lt; / div & gt; & Lt; br & gt; & Lt; / div & gt; & Lt; / div & gt; Stack.imgur.com/q04CZ.png "alt =" यहाँ छवि विवरण दर्ज करें ">
अगर मैं 110% या 150% या ज़ूमिंग को ज़ूम करता हूं तो यह अलग आउटपुट देता है। इसका अर्थ है कि पिछला खंड ठीक से संरेखित नहीं है।
ज़ूम के साथ:
"पाठ">
कंटेनर को मापदंड वाले कंटेनर की चौड़ाई के लिए सेट करना मेरे लिए चाल करता है
बीटीडब्ल्यू ... आपको संभवत: एक साधारण तालिका करनी चाहिए ? <प्री> । कॉपप्रफोर्मेंस {पैडिंग-बाएं: 5px; & Lt; ----------- बदल दिया गया प्रदर्शन: तालिका; सीमा: 2px ठोस भूरे रंग; सीमा-त्रिज्या: 5px; ऊर्ध्वाधर-पंक्ति: बीच; रेखा-ऊंचाई: 30px; चौड़ाई: 340 पीएक्स; & Lt; ----------- बदल दिया गया}। क्रॉपपरफॉर्मेंस .DashboardTitle {width: 80px; & Lt; ----------- बदल दिया गया} .कॉपरपरफ़ॉर्मेंस .DashboardScore {width: 40px; & Lt; ----------- बदल दिया गया} .CorpPerformance .DashboardIcon {width: 100px; & Lt; ----------- बदल दिया गया} .CorpPerformance .Cvalational {width: 119px; & Lt; ----------- परिवर्तित पाठ-पंक्ति: केंद्र; सीमा-बायां: 1px बिंदीदार काली; पृष्ठभूमि रंग: धूसर; }
80px + 40px + 100px + 119px + 1px (सीमा) = 340 पीएक्स
और मैंने पेडिंग को हटा दिया
.CorpPerformance .ओओ & gt; Div {}
संपादित करें: एक तालिका के साथ ... यह बहुत आसान और ज़ूम काम करता है! मेरी टिप्पणी में लिंक की जांच करें
Comments
Post a Comment