Comment faire pousser un div horizontalement par son contenu?

s'il vous plaît, quelqu'un peut m'expliquer, pourquoi le rouge div n'est pas de s'étendre à la droite? Il s'arrête là où l'écran se termine. Que dois-je faire pour les faire développer?

Seule chose qui fonctionne c'est de l' "display: table-cell" le rouge div, mais je me demandais si il y a une autre façon, et pourquoi ce qui se passe...?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>
</body>
</html>
Bonne découverte. C'est très étrange. J'aimerais voir si quelqu'un arrive avec une solution sans l'aide de la table-cell ou float.
Vous pouvez toujours utiliser de l'HTML au lieu de XHTML 🙂
J'espère que c'est juste une blague. Je déteste les non-XML sérialisé HTML. Avis personnel... :-p

OriginalL'auteur | 2009-01-30

  1. 3

    C'est en effet bizarre. Essayez flottant à l'extérieur:

    <div style="background-color: #f00; float:left;">
    <div style="width: 2000px; height: 100px;" />
</div>
    Je pense flottant doit être utilisé uniquement pour... eh bien en fait flotter quelque chose. La surutilisation de flotteur peut devenir un gros gâchis. Réglage de la largeur de l'auto devrait fonctionner.
    Eh bien.. jamais l'esprit. auto ne fonctionne pas.
    Alors que personnellement, je ne pense pas que le flottement est la seule solution ici, ce qui fonctionne le mieux sur tous les navigateurs et table-cell ne pas. Bas-vote supprimé. =)

    OriginalL'auteur Crescent Fresh

  2. 2

    La div que c'est contenue dans est plus petit que 2000px. Vous avez besoin de faire quelque chose comme ceci:

      <div style="background-color: #f00; width: 2000px;">
    <div style="width: 2000px; height: 100px; " />
  </div>

    Bien sûr, maintenant à l'intérieur de la div de largeur n'a pas besoin d'être spécifié, sauf si elle est différente de la div extérieure.

    OriginalL'auteur Jeremy Ruten

  3. 2

    Mettre overflow: auto; dans le parent <div>'s style.

    OriginalL'auteur Bari

  4. 1
      <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>

    La fermeture d'une balise DIV comme ça (c'est à dire une auto-balise de fermeture) va provoquer des problèmes.

    Il peut être légal ( Voir ce Fil ), mais dans mon expérience, il provoque souvent un comportement étrange.

    Cependant, ce n'est pas le problème. Le code suivant fonctionne dans Chrome et IE9.

      <div style="background-color: #f00; display: inline-block; height: 100px;">
    <div style="width: 3000px; background-color: blue; height: 50px;">
        here is some content
      </div>
  </div>

    Display: inline-block; raconte l'élément de croître autant (ou aussi peu) que nécessaire.

    Violon: http://jsfiddle.net/sArvr/

    Cela semble contre-intuitif comportement.

    OriginalL'auteur Tim Medora

  5. 1

    Vérifier auprès de celui-ci. elle permettra d'élargir le contenant que le texte continue sur...

        <div style="background-color: #f00; height: 100px; display: inline-block;">
      <div style="background-color: blue; height: 50px; white-space:nowrap; display: inline-block;">
        here is some content
      </div>
    </div>
    Qui fonctionne pour moi. Merci

    OriginalL'auteur Prasanth K C

  6. 0

    En fonction de ce que vous êtes en utilisant ce pour, je suis en supposant que l'élément div est va être le thème principal de la page; si c'est le cas, vous pouvez prendre que width: 2000px; ligne et juste de l'appliquer sur le corps au lieu de le faire directement au niveau du bloc de l'élément que vous voulez étirer:

    <style>
body
 {
width: 2000px;
 }
</style>

    Si cette méthode ne fonctionne pas pour vous, pour quelque raison que ce soit, la création d'un pixel transparent de l'image et de lui donner la largeur que vous avez besoin devrait fonctionner tout aussi bien.

    OriginalL'auteur Hexagon Theory

  7. 0

    La largeur de l'intérieur de la div peut changer, j'ai besoin de développer l'extérieur, donc je ne peux pas attribuer une largeur.

    OriginalL'auteur

  8. 0

    Il semble que max largeur de la div parent est limitée par la largeur de l'écran du navigateur même si le div de largeur pousse au-delà de la largeur de l'écran du navigateur. C'est une étrange découverte...

    Je suggère l'utilisation de flotter sur la div parent. (ref: crescentfresh) je sais pour sûr que la table-cell ne fonctionne pas pour IE6. Et un test rapide sur IE7 sur ma machine ne fonctionne pas non plus bien qu'il faut...

    Cela devrait fonctionner. (EDIT: Cela ne fonctionne pas...)

    <div style="background-color: #f00; width: auto;">
  <div style="width: 2000px; height: 100px; "></div>
</div>
    Non, ne fonctionne pas.

    OriginalL'auteur Brian Kim

  9. 0

    mettre <div style="min-height: 100px; " />

    lorsque vous vous développez le contenu de plus, notre div devrait croître sa taille automatiquement.

    OriginalL'auteur Selvin