Problème de disposition CSS avancé

Je souhaite créer une boîte de dialogue avec un titre, des bordures (gauche, droite, bas) ainsi que le contenu. Le code source de courant:Problème de disposition CSS avancé

<html> 
<body> 
<div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table"> 
<div style="display: table-row;"> 
<div style="background: #f00; width: 100%; display: table-cell;height: 24px;">top</div> 
</div> 
<div style="display: table-row;"> 
<div style="background: #0f0; width: 100%; display: table-cell;"> 

<div style="display: table;"> 
<div style="display: table-row;"> 

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div> 

<div style="display: table-cell;"> 
<div style="overflow: scroll; white-space: nowrap"> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 

cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe cwe <br /> 
</div> 
</div> 

<div style="display: table-cell; width: 4px; height: 100%; background: #000;"></div> 

</div> 
</div> 



</div> 
</div> 
<div style="display: table-row;"> 
<div style="background: #000; width: 100%; display: table-cell; height: 4px;"></div> 
</div> 

</div> 
</body> 
</html>

produit une sortie de

alt text http://img19.imageshack.us/img19/7898/46812649.png

ce qui est arrivé à la gauche et le droit confin et pourquoi la taille dépasse la largeur spécifiée dans le top parent (152px) ?

Source

2010-03-15 Tower

Si vous utilisez une table, utilisez une table. Définir l'affichage des éléments de bloc pour imiter divers éléments de la table est au mieux problématique, et très imprévisible cross-browser.

Source

2010-03-15 12:44:25 Robusto

Vous utilisez trop de règles en ligne, essayez de les séparer en utilisant des sélecteurs CSS, des classes et des ids pour divs, utilisez les tables de manière appropriée.

Certaines règles en annulent d'autres, c'est pourquoi vous ne voyez pas les bordures.

Source

2010-03-15 12:46:36 OverLex

Désolé mais votre code HTML est un horrible bordel de soupe rappelant le début des années 90.

Pour votre problème exact, la largeur est plus grande en raison de votre règle white-space: nowrap qui étire la table. Et c'est ce qui est susceptible de supprimer les frontières - il n'y a pas de contenu dans ces "cellules" de sorte qu'elles s'effondrent à une largeur nulle. Comme l'a dit Robusto, si vous voulez une table, utilisez une table. Si vous voulez une boîte de dialogue, vous n'avez certainement pas besoin de toutes ces balises div imbriquées. Il suffit que votre un extérieur et utiliser la règle de la frontière pour définir les frontières:

<div style="border:4px solid #000; border-top:0; background:#0ff; width:152px; height:112px;"> 
    <h2 style="background:#f00;">top</h2> 
    cwe cwe cwe cwe... 
</div>

Source

2010-03-15 12:55:31 DisgruntledGoat

Vous ne devez pas utiliser tous ces div s pour commencer. Vous pouvez simplifier votre HTML de façon drastique:

<div> 
    <h1>top</h1> 
    <div> 
    <p>cwe cwe cwe</p> 
    <p>cwe cwe cwe</p> 
    </div> 
</div>

et d'appliquer facilement tout le style dont vous avez besoin. Pas besoin de créer un div pour chaque bordure. C'est ce que les attributs CSS border-left, border-right, border-bottom et border-top sont là pour (et ceux-ci sont pris en charge par les anciens navigateurs, contrairement à display: table).

Source

2010-03-15 12:58:39

le défilement n'est pas causé par le dimensionnement, il est dû au fait que vous avez forcé la valeur de défilement en dépassement. Dans mon expérience, le mettre en défilement montre les barres de défilement tout le temps - mais dans leur état désactivé. essayez de régler le dépassement sur auto

<div style="overflow: auto; white-space: nowrap">

Source

2010-03-15 13:04:18 Mauro

Répondre

Questions connexes