Comment mettre en page suivre le contenu en utilisant CSS?

Question

Voici la mise en page que je voudrais faire:

« entrée » est une largeur de 70% de l'écran. et la «seconde entrée» est une largeur de 70% de «entrée». 'bouton' est une largeur de 30% de 'entrée'. 'entrée' est au milieu de l'écran.

Comment puis-je le faire? Je vous remercie.

Answer 1

Ne pensez pas que cela nécessite des compétences particulières. Ceci est une disposition fluide très basique. Un exemple

Markup

<div id="wrapper"> 
    <input type="text" id="firstrow_textbox" /> 
    <input type="text" id="secondrow_textbox" /> 
    <input type="button" id="secondrow_button" /> 
</div> 

CSS

#wrapper { 
    width: 70%; 
} 
    #firstrow_textbox { width: 100%; } 
    #secondrow_textbox { width: 70%; } 
    #secondrow_button { width: 28%; } /* Due to border and all */ 

Demo

Answer 2

Vous pouvez obtenir ceci pour travailler en créant un élément de wrapper qui a la «largeur de 70% de l'écran» désirée, et ensuite dimensionner les entrées relatives à cela.

Exemple: http://jsbin.com/akeze4

Vous voulez toujours ajuster les marges et rembourrages pour votre but précis, mais cela devrait être un bon départ.

Answer 3

Quelque chose comme ça ->http://jsfiddle.net/Husar/gkFhb/2/

marges tune très bien et le rembourrage

Answer 4

mise en page:

<div class="container"> 
    <div> 
     <input type="text" id="input1" /></div> 
    <div> 
     <input type="text" id="input2" /> 
     <input type="button" id="input3" /></div> 
</div> 

css:

.container { 
    margin: auto; /* to center the container horizontally */ 
    width: 70% /* to take the 70% of the parent element */ 
    } 
    #input1 { 
    width: 100%; /* to take the 100% of the parent which is the container div */ 
    } 
    #input2 { 
    float: left; /* to align the control on the left */ 
    width:70%; /* to take the 70% of the parent which is the container div */ 
    } 
    #input3 { 
    float: right; /* to align the control to the right */ 
    width:29%; /* to take the 29% of the parent which is the container div */ 
    } 

Aperçu: http://jsbin.com/ibeyo5