Besoin générique div css qui ne se chevauchent pas (comme une table)

Je suis en train d'utiliser les divs au lieu de tables de styles de boîtes autour de mon contenu. Le contenu peut être toute taille et doit permettre au navigateur d'être redimensionnée à n'importe quel degré. Besoin de la couleur d'arrière-plan et bordure à contiennent le contenu. Cela fonctionne bien avec les tables. Comment puis-je obtenir un div pour travailler de la même façon?

Note: j'ai ajouté "_"à cause de ma non-rupture des espaces ont été perdus.

Exemple De Page

Exemple d'image

Besoin générique div css qui ne se chevauchent pas (comme une table)
_{(source: c3o.com)}

Contenu:

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>

Je ne peux pas les voir se chevauchent, ils fonctionnent de la même façon, quel est le problème ici?
Je ne vois pas de problèmes. IE6 et FF2 montrent le même comportement -- elle fonctionne correctement.
Désolé, j'essaie de télécharger mon image...ne semble pas être le faire. Regardez: c3o.com/div-like-table.JPG
Redimensionner votre navigateur (IE ou Firefox), le tableau contient, mais les divs ne le font pas.
J'ai augmenté le rembourrage à 1000, de sorte que vous pouvez facilement voir un chevauchement

OriginalL'auteur fcs | 2009-04-06

2

Il n'est pas facile de faire ce qui est crossbrowser sympathique, que je sache.

Au moins dans firefox, vous pouvez créer une simulé table en définissant des divs avec
```
display:table;
display:table-row;
display:table-cell;
```
De sorte que ces divs de travailler comme des éléments de la table. Ensuite, la boîte contiendra son contenu. Si c'est une bonne solution ou pas, c'est debateable.

J'ai eu le même problème avec les mises en page moi-même. Habituellement, je l'ai résolu par ceux paramètre min-width et overflow:auto;

Je souhaite qu'il y ait un dépassement de capacité:contiennent; dans le css.
Merci. overflow:contiennent est exactement ce dont j'ai besoin. Je peux arrêter à l'aide de tableaux.
Autant que je sache, il n'existe pas de valeur de dépassement: contiennent des w3schools.com/Css/pr_pos_overflow.asp
Il n'y a pas une telle valeur, c'est pourquoi j'ai dit que j'aimerais qu'il y était.
display:table n'est pas une option réaliste jusqu'à ce qu'il est pris en charge par IE

OriginalL'auteur Mikko Tapionlinna
2

Si vraiment vous ne voulez pas utiliser un tableau, vous pouvez le faire:
```
div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}
```
La prochaine fois ce genre de problème se lève pour aller giveupandusetables.com.

Lien sympa. Je suis surpris de voir comment dur ce qui a été. Semble une chose fondamentale: "un conteneur qui contient toujours du contenu".
est très basique.
ma réponse est giveupandusetables.com

OriginalL'auteur Kristof Neirynck
0

Une façon est de faire de vos boîtes de flotteurs. Ajouter float:left; boîte de, boîte à en-tête, et la zone du corps. Ajouter clear:both; pour la zone du corps à la force au-dessous de la boîte-en-tête. Vous aurez probablement besoin d'ajouter de propriété clairs à ce que le contenu suit.

Vous ne sera pas obtenir le côté droit de la zone d'en-tête et la zone du corps à s'aligner, si. Si vous voulez leur largeurs de même, vous voulez vraiment une table. Le tableau est un outil pour faire toutes les cellules d'une même colonne de partager les largeurs.

Pour d'autres idées, consultez cette SORTE de question.

Merci. Je veux que les largeurs d'être le même. Les sons que j'ai besoin d'utiliser des tableaux.

OriginalL'auteur buti-oxa
0

Tout d'abord, vous devriez être en utilisant un balisage sémantique. Si quelque chose est un en-tête et le contenu de marque comme telle avec en-tête et des étiquettes de paragraphe. Qui vous aideront à sortir de la " table façon de penser ont été vous essayez d'imiter votre balisage et des styles comme un tableau, le balisage doit venir en premier, CSS peut venir après.

Les éléments suivants doivent faire ce que vous voulez:
```
<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>
```
Réflexion sur le balisage et le style séparément est le chemin de CSS Zen Maîtrise :o)

Merci mais cela permet toujours à des chevauchements. Sympa mais manque le point de la question.
Veuillez expliquer ce que vous entendez par "chevauchements" puis, cela a bien fonctionné pour moi dans FF3.
J'ai ajouté des espaces insécables pour le rendre plus évident. Découvrez cette image de firefox: c3o.com/overlap1.jpg. J'ai juste besoin d'un récipient qui ne se chevauchent pas (comme une table).

OriginalL'auteur roryf
0

Cela fonctionne (en fait, se tient mieux que des tableaux dans ie7 trop)
```
div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}   
```
REMARQUE: les deux cases doivent avoir les mêmes à gauche et à droite de rembourrage ou de l'un s'avance un peu.

Fonctionne très bien sous IE, mais pas très bon dans Firtefox ou chrome.
Je l'ai testé sous Firefox et c'était très bien pour moi
Viens de tester à nouveau, cette fois dans chrome et safari. Vous assurer que vous avez copié le code correctement? coz il n'a certainement de travail.
Le récipient ne doit pas se superposer ET de les redimensionner avec la page. Quand j'ai tirer vers le haut dans firefox, vous avez résolu le problème de chevauchement, mais pas de redimensionnement. J'ai mis un exemple ici: c3o.com/wheresrhys.htm
Redimensionne bien dans IE

OriginalL'auteur wheresrhys
0

Flotteurs ne sont pas nécessaires, mais vous semblez confondre les utilisations de marge vs rembourrage. La suite de petits ajustements à votre style fonctionne comme vous le souhaitez:
```
<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>
```
J'ai changé le rembourrage sur la zone de marge, de déplacer la frontière de votre box, et ajouté un trait de soulignement à l'en-tête.

Je suis probablement le mélange de rembourrage et les marges, mais vous avez la solution a toujours la même se chevaucher. Il suffit de lancer avec un non-mode quirks doc-type.
J'ai mal compris le problème. Je vais regarder à nouveau plus tard - seulement c'est à dire au travail.

OriginalL'auteur Traingamer
0

J'ai eu ce problème également d'utiliser Firefox 6.0.1, Opéra 10.62, Safari 5.1, mais pas sous IE 9, et le overflow:auto fixe dans tous les navigateurs. Rien d'autre a fait. J'ai aussi essayé de débordement:contenir, qui a également résolu le problème, mais il semble que contiennent n'est pas une valeur valide pour le débordement, donc je suppose que, puisque la valeur n'est pas valide, l'auto a été substitué.

OriginalL'auteur Bruce Patin

Vous devez vous connecter pour publier un commentaire.