bugfix> javascript > 投稿

私のアプリケーションでは、ユーザーはテキストを入力し、ボタンをクリックして、入力されたテキストを含む(コンテナ内の)DOMに新しい「スパン」を追加できます。ユーザーが入力したテキストに合わせて、これらのスパンに必要なだけの幅を持たせたい(ユーザーがコンテナーの幅より長いものを入力しないと仮定できる)。また、コンテナをできるだけ多くのスパンに一列に収めたいと思います。スパンが現在の行に残っているよりも多くのスペースを必要とする場合-> 下の行に移動します(図の最後の2行を参照)。

以下の構成を実現するために、どのようなCSSとコンテナー内のスパンを追加する必要がありますか?

注:このコンテナの幅は固定されていますが、新しいテキストで埋められたスパンに合わせて必要に応じて高さが大きくなります

回答 2 件
  • モックアップごとに、次の2つの方法でタスクを達成できます。

    フレックスCSS3プロパティを使用

    CSS3プロパティwidth autoを使用し、spanクラスで左にフロートします。

    span class = "class-name"をみましょう

    .class-name {
      display: inline-block;
      width: auto;
      float: left;
    }
    
    

    このスパンクラスでは、必要に応じてプロパティを追加できます。

  • CSS3 flexプロパティでこれを行うには:

    .container {
      display: flex;
      border: 1px solid red;
      width: 20rem;
      flex-wrap: wrap; /* otherwise it will try to fit everything on one line */
      justify-content: space-between; /* alternatives are space-evenly or space-around*/
    }
    
    

    このペンを参照してください。フレックスを使用すると、コンテナのこの幅の使用方法をより適切に制御できるという利点があります。フロートソリューションでは、コンテンツを正当化できません。

あなたの答え