एचटीएमएल

Question

में एक ही पंक्ति पर दो शीर्षलेख कैसे हैं I बाईं ओर एक ही क्षैतिज नियम पर दो शीर्षलेखों H2 और H3 रखना चाहते हैं और दाईं ओर दाईं ओर। उनके पास उनके नीचे एक मानव संसाधन है और मैं चाहता हूं कि वे इस एचआर से एक ही दूरी पर हों।

मैंने उन्हें इनलाइन दोनों बनाने की कोशिश की और एक फ्लोट सही और दूसरा बाएं हो गया। ऐसा करने में समस्या एच 3 के साथ थी क्योंकि यह एच 2 की तुलना में छोटी है, यह एच 2 की लंबाई में केंद्रित थी।

एच 2 एचआर पर बैठे तरह की तरह था और एच 3 थोडा मध्य हवा में तैरने जैसा लग रहा था।

मैं चाहता था कि वे दोनों घंटा पर बैठे दोनों की तरह बनें।

h2{ 
display:inline; 
float:left; 
} 
h3{ 
display:inline; 
float:right; 
} 

मैं स्थिति की दृष्टि से वर्णन करने के बारे में बात कर रहा था।

Answer 1

आप एक div टैग में दो शीर्षकों रैप करने के लिए आवश्यकता होगी, और क्या वह div टैग एक शैली का उपयोग करता है जो clear: both करता है। उदाहरण के लिए:

<div style="clear: both"> 
    <h2 style="float: left">Heading 1</h2> 
    <h3 style="float: right">Heading 2</h3> 
</div> 
<hr /> 

होने hr के बाद div टैग सुनिश्चित करेगा कि यह दोनों शीर्षलेखों के नीचे धकेल दिया जाता है।

या उससे कुछ ऐसा ही है। उम्मीद है की यह मदद करेगा।

Answer 2

आप केवल करने के लिए में से एक की आवश्यकता चाहिए:

• उन्हें बनाओ दोनों inline (या inline-block)
• उन्हें float बाएं या दाएं

आप को समायोजित करने में सक्षम होना चाहिए करने के लिए सेट करें height, padding, या margin छोटी स्थिति के गुणों को इसकी स्थिति के लिए क्षतिपूर्ति करने के लिए। मैं दोनों शीर्षलेखों को एक ही height रखने की अनुशंसा करता हूं।

उदाहरण के लिए यह live jsFiddle देखें।

(jsFiddle का कोड):

सीएसएस

h2 { 
    font-size: 50px; 
} 

h3 { 
    font-size: 30px; 
} 

h2, h3 { 
    width: 50%; 
    height: 60px; 
    margin: 0; 
    padding: 0; 
    display: inline; 
}​ 

एचटीएमएल

<h2>Big Heading</h2> 
<h3>Small(er) Heading</h3> 
<hr />​ 

Answer 3

Css ऊर्ध्वाधर- align संपत्ति तुम बाहर यहाँ की मदद करनी चाहिए:

vertical-align: bottom; 

आप अपने छोटे हैडर :)

Vertical-Align

Answer 4

की जाँच करें मेरी नमूना समाधान के लिए क्या जरूरत है

<h5 style="float: left; width: 50%;">Employee: Employee Name</h5> 
<h5 style="float: right; width: 50%; text-align: right;">Employee: Employee Name</h5> 

यह आपके पृष्ठ को दो में विभाजित करेगा और दो शीर्षलेख ele दाएं और बाएं भाग के लिए समान रूप से मींट।

Answer 5

निम्नलिखित कोड आपको एक ही पंक्ति पर दो शीर्षलेखों, पहले बाएं-गठबंधन और दूसरे दाएं संरेखित करने की अनुमति देगा, और दोनों शीर्षकों को समान आधार रेखा पर रखने का अतिरिक्त लाभ होगा।

एचटीएमएल भाग:

<h1 class="text-left-right"> 
    <span class="left-text">Heading Goes Here</span> 
    <span class="byline">Byline here</span> 
</h1> 

और सीएसएस:

.text-left-right { 
    text-align: right; 
    position: relative; 
} 
.left-text { 
    left: 0; 
    position: absolute; 
} 
.byline { 
    font-size: 16px; 
    color: rgba(140, 140, 140, 1); 
}