简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Front-end - CSS une ligne divisée en deux colonnes
滿天的星座
滿天的星座 2017-05-27 17:44:16
0
6
969

Le dessin de conception stipule que la longueur du bloc de gauche est de218px, mais je n'ai aucun moyen de déterminer la longueur du bloc suivant dans la même rangée. J'espère que ce dernier bloc pourra remplir automatiquement la rangée actuelle. conseil

Lecssstyle actuel de la première pièce est :

float: left; width: 218px;

Rendu :

滿天的星座
滿天的星座

répondre à tous (6)
阿神
阿神2017-05-27 17:46:16 6 plancher 
 
 
123123123123123
 
1232131

flex que vous méritez mais n'oubliez pas d'ajouter le préfixe

Comme+0
Ajouter une réponse
    仅有的幸福
    仅有的幸福2017-05-27 17:46:16 5 plancher

    Le bloc de gauche peut être positionné de manière absolue : position : absolue ; Le bloc de droite est directement margin-left : 218px puis display:block;

    ;
    Comme+0
    Ajouter une réponse
      PHPzhong
      PHPzhong2017-05-27 17:46:16 4 plancher

      1. Parent{display:flex;}, droite {flex:1}{display:flex;}，右边{flex:1}

      2.右边{float:left;width:calc(100% - 218px);}

      2. Droite {float:left;width:calc(100% - 218px);}
      Comme+0
      Ajouter une réponse
        小葫芦
        小葫芦2017-05-27 17:46:16 3 plancher

        Dernière pièce{

        width:calc(100% - 218px); float: left;

        }

        Comme+0
        Ajouter une réponse
          大家讲道理
          大家讲道理2017-05-27 17:46:16 2 plancher

          Le pourcentage est correct

          Comme+0
          Ajouter une réponse
            过去多啦不再A梦
            过去多啦不再A梦2017-05-27 17:46:16 1 plancher

            flex est une solution, mais il faut souvent qu'il soit désormais compatible avec les navigateurs bas de gamme tels que IE8, et flex n'est pas possible.
            Proposer une autre solution :
            Structure :

             
            left
             
            right

            Style :

            .left, .right { height: 30px; } .left { float: left; width: 200px; background: #f90; } .right { background: #369; overflow: hidden; }
            Comme+0
            Ajouter une réponse
              Sujets populaires
              Plus>
              Articles populaires
              Tutoriels populaires
              Plus>
              Tutoriels associés
              Recommandations populaires
              Derniers cours
              Derniers téléchargements
              Plus>
              effets Web
              Code source du site Web
              Matériel du site Web
              Modèle frontal
              À propos de nous Clause de non-responsabilité Sitemap
              Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！