Avoir un diable de temps avec ce formatage correct de sorte que toute idée serait appréciée. Nous avons un tas d'informations relatives à foos em> que nous voulons garder regrouper ensemble. Donc, si nous avions un tas de foos em> répertoriés à côté de l'autre, si cet élément provoque le em> foos em> envelopper, tout foo em> resterait ensemble . Aussi, le formatage doit ressembler à: le texte est donc à gauche et les chiffres sont à droite. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>none</title>
<style type="text/css" >
body
{
margin: 0;
padding: 0;
min-width: 850px;
text-align: left;
line-height: 28px;
font-size: 14px;
font-family: Verdana,Tahoma,Arial;
}
#content
{
width: 800px;
border: solid 1px #000000;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
div.foo
{
display: inline;
min-width: 250px;
width: 250px;
border: dotted 1px #b8b8b8;
padding: 0px 15px 0px 0px;
vertical-align: middle;
}
.foo .id
{
display: none;
}
.foodata
{
display: inline;
text-align: left;
white-space: nowrap;
margin: 2px 2px 2px 2px;
}
.fooname
{
display: inline;
min-width: 80px;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
}
.foomodel
{
display: inline;
min-width: 80px;
color: #000000;
font-size: 12px;
}
.foocounts
{
min-width: 90px;
text-align: right;
display: inline;
}
.foosiblings
{ /* add in image for children */
background: url(../../images/siblings.png) no-repeat 4px 10%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fookids
{ /* add in image for connection */
background: url(../../images/kids.png) no-repeat 4px 25%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fooimage
{
display: inline;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="content" >
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Brad</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(3)</span>
<span class="fookids" >(2)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Tom</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(1)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Harry</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(6)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Sally</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Peggy</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(12)</span>
<span class="foosiblings" >(16)</span>
</span>
</a>
</div>
</div>
</body>
</html>
5 Réponses :
Pour tout garder ensemble, ajoutez ceci:
div.foo
{
white-space:nowrap;
}
Peut-être (basé sur la note de Paul que des choses semblent sortir de leur contenu): blanc-espace: Nowrap; Overflow: défilement ? Bien que je n'ai pas testé cela.
Vous avez donc un tas de divs, chacun contenant une certaine teneur, et vous les souhaitez affiché à côté de l'autre, d'une ligne?
.foo { float: left; }
Vous auriez besoin de vous assurer que le contenu a débordement: auto; Définir pour que la FOO soit toujours à l'intérieur.
@Chris: Vous avez raison qu'il est probablement plus nécessaire que le flotteur: laissé. Cependant, sans plus besoin, il est difficile de dire exactement quoi d'autre est nécessaire.
Le J'ai trouvé les suivants travaillés dans IE, Firefox et Chrome uniquement (PC seulement, n'ont pas accès à un Mac juste maintenant) P> blanc-espace: Nowrap CODE> style empêche la division "FOO" de la rupture, mais j'ai également constaté que cela leur a provoqué de sortir de la largeur définie dans le "contenu" Div. div.foo
{
display:inline-block;
}
Ceci est un exemple où les tables sont "autorisées" à être utilisées. Parce que c'est des données tabulaires. Un peu.
Tout faire en Div, c'est bien pour la mise en page, mais vous répertoriez réellement des choses avec des lignes et des colonnes. C'est une table dans mon livre.
Je ne suis pas d'accord que juste parce que quelque chose a des rangées et des colonnes, c'est une table. De plus, si vos "cellules" sont une taille fixe, il est assez facile de simuler une mise en page de grille sans tables. Enfin, le CSS Affichage: table, cellule de table, rangée de table, etc peut être utilisé pour obtenir les propriétés de la mise en page de la table du navigateur sans table sémantique (malheureusement, aucun support IE 6 ou 7 pour ceux-ci .)
@Shiny: Je n'ai pas dit "juste parce que ça a des rangées et des colonnes". J'ai dit "inscrire des choses avec des rangées et des colonnes".
@Tor: J'ai peut-être mal compris la question initiale. Si chaque "FOO" est destiné à être sur une seule ligne et que les données à l'intérieur des blocs "FOO" sont censés être espacées de manière uniforme, alors oui, c'est une table. Mon empreinte d'origine était que chaque bloc FOO était un bloc individuel signifie être espacé dans une grille.
Ce fil est vicieusement vieux mais pour quiconque peut se produire sur elle ...
La solution moderne consiste à utiliser un flexbox . Il peut devenir lourd mais détourner la charge du serveur (génération HTML) au client (calculer Flexbox ou même JS) semble être de Rigeur ces jours-ci, en particulier afin de maintenir une lisibilité sémantique. Essayez quelque chose comme ceci: Vous devez copier votre lien pour envelopper des éléments individuels (encore une fois, plus lourd mais plus sémantiquement correct) et vous voudrez probablement donner à chacun une classe distincte Donc, vous pourriez la cibler dans votre feuille de style pour une largeur spécifique, une alignement, etc. Note: Je suis arrivé ici moi-même à la recherche de l'affichage si les données sont sémantiquement une table est philosophique et pédestique. Je reporte la discussion ci-dessus et la "bonne", la réponse est une zone très grise. Le nouveau CSS propose également un modèle de table basé sur CSS et si votre sensibilité vous amène à une table étant sémantiquement principalement - correcte mais que vous ne voulez pas réécrire comme float travaux mais efforts pour faire Clearfix plus qu'un piratage persistant semble avoir été obsolète en faveur des solutions CSS 3. : inline-block; < / Code> et Blanc-Space: Nowrap; Réponses parce qu'ils ont adapté mon besoin de plus que la réponse acceptée. ,
et , il y a maintenant une très bonne option intermédiaire. Il faudrait mélanger votre HTML mais par l'apparence de l'OP, cela est probablement généré automatiquement si probablement facile.
0 commentaires
Si vous regardez mon exemple, le texte (nom, icône, modèle) est laissé aligné, tandis que les comptes (enfants, frères et sœurs) sont correctement alignés sur l'ensemble de Div.foo
Vous avez probablement trop été lavé le cerveau avec les "tables sont mauvais". Ils sont seulement mauvais pour Layout , pas pour la présentation de Données tabulaires .
Je n'ai pas senti que ce sont des données tabulaires car ce n'est qu'une rangée. Essayer de le faire sémantiquement correct plutôt que le balisage de table rapide et facile (s'il y a un moyen).