Stretching modèle 4 col avec deux colonnes fixes dans le milieu et personnalisé SOC. Possible?

L'ordre du code source HTML devrait ressembler à ceci:Stretching modèle 4 col avec deux colonnes fixes dans le milieu et personnalisé SOC. Possible?

<body> 
    <div>col2</div> 
    <div>col3</div> 
    <div>col1</div> 
    <div>col4</div> 
</body>

et devrait ressembler à ceci:

<----------------------100%-----------------------> 
+--------+-------------------+-----------+--------+ 
| col1 |  col2  | col3 | col4 | 
|  |     |   |  | 
| (100% |  (664px)  | (312px) | (100% | 
| -976px)|     |   | -976px)| 
| /2 px |     |   | /2 px | 
|  |     |   |  | 
|  |     |   |  | 
|  |     |   |  | 
|  |     |   |  | 
+--------+-------------------+-----------+--------+

devrait étirer à pleine largeur.
col2 devrait avoir une largeur fixe de 664px,
col3 doivent avoir une wizth fixe de 312px,
col1 et col4 doivent avoir une largeur égale et de remplir la largeur de l'écran.
cela devrait être accompli en utilisant css seulement.
tous les principaux navigateurs devraient soutenir

i pourrait emballer col2/col3 dans un autre conteneur div et essentiellement faire face à une mise en page 3 col. mais je voudrais vraiment éviter ce conteneur supplémentaire si possible. possible en quelque sorte? salutations, joe

Source

2010-10-10 The Surrican

Même si l'utilisation de tables opposées aux divs pour les mises en page n'est pas vraiment la solution, dans ce cas, il s'agit peut-être de votre seule option. L'avantage est que les cellules d'une table vont utiliser tout l'espace disponible, et vous pouvez combiner des largeurs spécifiques avec des largeurs relatives. Vous pouvez accomplir la même chose avec divs, mais je ne pense pas que cela puisse être fait sans faire quelques calculs avec JavaScript.

Voici un exemple rapide. Les deux cellules du milieu ont une largeur fixe; les cellules externes reprendront ce qui reste. Assurez-vous que la largeur de la table est suffisante. Et s'il y a du contenu dans les cellules externes, considérez une largeur minimale pour ces cellules et ajoutez-la à la largeur minimale de la table.

HTML:

<table id="wrap"> 
    <tr> 
     <td id="col1">col1</td> 
     <td id="col2">col2</td> 
     <td id="col3">col3</td> 
     <td id="col4">col4</td> 
    </tr> 
</table>

CSS:

#wrap { 
    min-width: 976px; 
    width: 100%; 
} 
#wrap tr td { 
    padding: 0; 
    border-spacing: 0px; 
} 

#col1, #col4 { 
    /* consider a min-width if there's content in these columns */ 
} 
#col2 { 
    width: 664px; 
} 
#col3 { 
    width: 312px; 
}

Exemple: http://jsfiddle.net/ukmBH/1/

Source

2010-10-10 13:55:01 Alec

je vais prendre ça pour un non, thx :) table est pas de solution pour moi que l'ordre source n'est pas comme souhaité, je vais envelopper les deux colonnes de largeur fixe dans un div, puis son possible ... –

Stretching modèle 4 col avec deux colonnes fixes dans le milieu et personnalisé SOC. Possible?

Répondre

Questions connexes