Comment faire le 2ème élément obtenir le reste de l'espace horizontal

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>

Source

2009-07-18 Artem

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>

Source

2009-07-18 05:39:54 Artem

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>

Source

2009-07-18 05:16:33 sqram

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

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.

Source

2010-02-03 00:11:05 GenericMeatUnit

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

Source

2015-03-10 22:25:58 Sphinxxx

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

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

Comment faire le 2ème élément obtenir le reste de l'espace horizontal

Répondre

Questions connexes