fare un div crescere e ridursi in base alla dimensione della finestra del browser

sto facendo una pagina html molto semplice e vorrei sapere come fare le seguenti due cose per la mia pagina:fare un div crescere e ridursi in base alla dimensione della finestra del browser

Ho un div contenitore e vorrei mettere il div contenitore al centro della pagina.
Il contenitore div crescerà e si restringerà quando ridimensiono le dimensioni di Windows.

Ho scritto il codice allegato ma il contenitore è sempre incollato a sinistra e non cambierà la dimensione quando ridimensiono la finestra.

<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>

Mi sono perso qualcosa qui? Qualsiasi aiuto sarà apprezzato!

Grazie.

fonte

2012-12-19 Kintarō

utilizzare la dimensione%, anziché la dimensione PX, IE 'larghezza: 80%;' – Darren

O, meglio, don ' t float it – Shmiddty

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

CSS

#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%; 
}

fonte

2012-12-19 19:27:43

Grazie! Questo è quello che mi serve! :) –

posso farlo per '

'? –

Ofcourse, perché no? O mi sta sfuggendo qualcosa ? –

Il modo migliore per centrare un oggetto, in particolare un <div>, è quello di utilizzare il seguente CSS:

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

Senza un margine fisso, l'oggetto sarà centrato.

Per il ridimensionamento, rendere le dimensioni relative (ad esempio 40%) alla pagina anziché assolute (ad esempio 400 px).

fonte

2012-12-19 19:27:09 MattDavBen

Grazie! Funziona –

Un metodo rapido per CSS di Matt a fare la centratura orizzontale è

margin: 0 auto;

Il 0 detterà la parte superiore e inferiore del margine di e l'auto a destra ea sinistra margini. Se si desidera un margine in alto/in basso, è possibile modificare lo 0 in qualsiasi cosa si desideri (ad esempio margin: 20px auto;.

fonte

2013-12-04 20:46:15 LLong

fare un div crescere e ridursi in base alla dimensione della finestra del browser

risposta

Problemi correlati