एक div बढ़ने और ब्राउज़र विंडो आकार

मैं एक बहुत ही सरल html पृष्ठ बनाने हूँ के आधार पर हटना और पता करने के लिए अपने पृष्ठ के लिए निम्नलिखित दो काम करने के लिए कैसे चाहते हैं: मैं एक कंटेनर div हैएक div बढ़ने और ब्राउज़र विंडो आकार

और पेज के केंद्र में कंटेनर div डालना चाहते हैं।
जब मैं विंडोज़ आकार का आकार बदलता हूं तो कंटेनर div बढ़ेगा और घट जाएगा।

मैंने संलग्न कोड लिखा लेकिन कंटेनर हमेशा बाईं ओर चिपकाया जाता है और जब मैं विंडो का आकार बदलता हूं तो आकार बदल नहीं जाएगा।

<title>Demo</title> 
<head>This is a demo</head> 
<style> 
#nav 
{ 
background-color: red; 
float: left; 
width: 200px; 
position:relative; 

} 

#detail 
{ 
background-color: green; 
float : right; 
width: 800px; 
position:relative; 
} 

div.testDetail 
{ 
margin-top:10px; 
margin-left:20px; 
margin-right:20px; 
margin-bottom:10px; 
} 

#container 
{ 
width:1000px; 
position:relative; 
} 
</style> 

<hr> 
<body> 
<div id="container"> 
<div id="nav"> 
    <ul>Tests</ul> 
</div> 
<div id="detail"> 
    <div class="testDetail"> 
     <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/> 
     <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/> 
     <h3>Title</h3> 
     <p>Testing</p> 
    </div> 
    <hr> 
</div> 
</div> 
<body>

क्या मुझे यहां कुछ याद आया? किसी भी मदद की सराहना की जाएगी!

धन्यवाद।

स्रोत

2012-12-19 Kintarō

पीएक्स आकार की बजाय% आकार का उपयोग करें, आईई 'चौड़ाई: 80%;' – Darren

या, बेहतर, डॉन ' इसे फ्लोट करें। – Shmiddty

<div id="my-div"> 
    ...content goes here 
</div>

सीएसएस

#my-div{ 
    //For center align 
    margin: 0 auto; 
    // For grow & shrink as per screen size change values as per your requirements 
    width: 80%; 
    height: 50%; 
}

स्रोत

2012-12-19 19:27:43

धन्यवाद! मुझे यही चाहिए! :) –

क्या मैं इसे '

'के लिए कर सकता हूं? –

संभोग, क्यों नहीं? या क्या मैं कुछ न कुछ भूल रहा हूं ? –

एक वस्तु, विशेष रूप से एक <div> केंद्रित करने के लिए सबसे अच्छा तरीका है, निम्नलिखित सीएसएस का उपयोग करने के लिए है: एक निश्चित मार्जिन के बिना

margin-left: auto; 
margin-right: auto;

, वस्तु केंद्रित किया जाएगा।

आकार बदलने के लिए, पूर्ण (उदा। 400px) के बजाय पृष्ठ पर सापेक्ष आकार (उदा। 40%) बनाएं।

स्रोत

2012-12-19 19:27:09 MattDavBen

धन्यवाद! यह काम करता है। –

मैट क्षैतिज केंद्रित करने के लिए सीएसएस का एक आशुलिपि विधि

margin: 0 auto;

0 बाएँ और दाएँ ऊपर और नीचे मार्जिन की और ऑटो हुक्म जाएगा मार्जिन। यदि आप शीर्ष/नीचे मार्जिन चाहते हैं तो आप 0 को किसी भी चीज़ में बदल सकते हैं (यानी margin: 20px auto;।

स्रोत

2013-12-04 20:46:15 LLong

एक div बढ़ने और ब्राउज़र विंडो आकार

उत्तर

संबंधित मुद्दे