2009-07-18 16 views
0

Je veux faire la première entrée avoir la largeur 100% et deuxième + image = 100% de sorte que la deuxième entrée obtienne le reste de l'espace (100% -img taille) sur la même ligne. Est-il possible de faire en utilisant CSS?Comment faire le 2ème élément obtenir le reste de l'espace horizontal

 
<html><head><title>width test</title> 
<style type="text/css"> 
.t { 
    width: 100%; 
    table-layout:fixed;
} .caption { text-align: left; width: 35%; } .data { text-align: left; width: 65%; } .edt { width: 100%; } </style> </head> <body> <table class="t"> <tr> <td class="caption">Caption:</td> <td class="data"><input type="text" class="edt" /></td> </tr> <tr> <td class="caption">Caption:</td> <td class="data"> <input type="text" class="edt" /><a href="#"><img width="22px" src="cal.png" /></a> </td> </tr> </table> </body> </html>

Répondre

0

J'ai trouvé que je peux le faire avec des tables. La question reste encore, est-il possible de faire avec div/css?

 
<html><head><title>width test</title> 
<style type="text/css"> 
.t { 
    width: 100%; 
    table-layout:fixed;
} .caption { text-align: left; width: 35%; } .data { text-align: left; width: 65%; } .edt { width: 100%; } .joiningtable { border-spacing:0px; border-collapse:collapse; width:100%; margin:0px; border:0px; padding:0px; } .joiningrest { width:100%; margin:0px; border:0px; padding:0px; } .joiningfixed { margin:0px; border:0px; padding:0px; } </style> </head> <body> <table class="t"> <tr> <td class="caption">Caption:</td> <td class="data"><input type="text" class="edt" /></td> </tr> <tr> <td class="caption">Caption:</td> <td class="data"> <table class="joiningtable"> <tr><td class="joiningrest"><input type="text" class="edt" /></td><td class="joiningfixed"><a href="#"><img src="cal.png" /></a></td><tr> <table> </td> </tr> </table> </body> </html>

0

non testé. vous n'avez pas mentionné les colspans ne peuvent pas être utilisés, donc cette solution l'utilise.

<table class="t"> 
    <tr> 
     <td class="caption">Caption:</td> 
     <td class="data"><input type="text" class="edt" /></td> 
    </tr> 
    <tr> 
     <td class="caption">Caption:</td> 
     <td colspan="3"><input type="text" class="edt" /></td> 
     <td class="data"><a href="#"><img width="22px" src="cal.png" /></a> 
     </td> 
    </tr> 
</table> 
+0

Malheureusement dans mon cas, cette structure de la table externe est fixe, donc je ne peux pas faire votre chemin ( – Artem

0

Si vous êtes toujours intéressé, il est possible, mais vous devez utiliser un peu de magie ..

Avec le positionnement absolu, vous pouvez étendre les champs d'entrée aussi large que vous le souhaitez, ou Au contraire, vous les faites s'étirer à 100% et les mettre à l'intérieur des étendues qui s'étendent aussi loin que vous le souhaitez car les champs de saisie sont des choses têtues et ne se comporteront pas autrement.

<html> 
<body> 
<div style="background-color:#DDDDFF; position:absolute; left:10px; top:10px; right:10px; height:80px;"> 
<span style="position:absolute; left:10px; top:10px;">Caption</span> 
<span style="position:absolute; left:10px; top:40px;">Caption</span> 
<span style="position:absolute; left:70px; top:10px; right:10px;"> 
<input type="text" style="width:100%" /> 
</span> 
<span style="position:absolute; left:70px; top:40px; right:40px;"> 
<input type="text" style="width:100%" /> 
</span> 
<img style="width:22px; position:absolute; top:40px; right:10px;" src="cal.png" /> 
</div> 
<div> 
</div> 

</body> 
</html> 

P.S. J'ai laissé les définitions de style sur les entités pour plus de simplicité. Dans un cas réel, je les déplacerais dans un fichier .css bien sûr.

1

Oui, cela peut être fait avec CSS. L'astuce consiste à utiliser display: table et display: table-cell, où width: 100% signifie "le reste de l'espace disponible".

Voici un exemple (avec wrapper divs autour .edt et le lien d'image pour un meilleur résultat): http://jsfiddle.net/zgw8q7vj/

Les parties importantes CSS sont celles-ci:

/*Use "table" layout in the 'data' cells, 
    and give them all the available width (after the captions)*/ 
.data { 
    display: table; 
    width: 100%; 
} 
/*Then give the textbox all the available remaining width...*/ 
.edt-wrapper { 
    display: table-cell; 
    width: 100%; 
} 
/*...after the image has claimed the space it needs*/ 
.img-wrapper { 
    display: table-cell; 
} 

Si vous ne voulez pas que la légende colonne pour prendre plus d'espace que nécessaire, vous pouvez même supprimer table-layout:fixed; et width: 35%; de .t et .caption

+0

Merci @Sphinxxx Sur quels navigateurs travaillera-t-il? Cela fonctionnerait-il dans IE6? – Artem

+0

Je ne sais pas avec certitude, mais après avoir testé le "mode d'émulation" de IE11, il ne fonctionne que sur IE8 et plus récent. – Sphinxxx