Skip to main content
書式を整えてみました
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

〇階

171

  • 30/60
  • 名前
      <div class="classSymbol-item5">
        <ul>
          <li>クラス</li>
          <li>クラス</li>
          <li>クラス</li>
        </ul>
      </div>
    </div>
  </div>
<article class="main">
      <div class="contents">
        <h1>〇階</h1>
        <div class="room-contents">
          <div class="roomNumber-item1">
            <p>171</p>
          </div>
          <div class="capacity-item2">
            <ul>
              <li>30&#047;60</li>
            </ul>
          </div>
          <div class="roomTeacher-item3">
            <ul>
              <li>名前</li>
            </ul>
          </div>
          <div class="facility-item4">
            <ul>
              <li>〇</li>
              <li>〇</li>
              <li>〇</li>
            </ul>
          </div>

          <div class="classSymbol-item5">
            <ul>
              <li>クラス</li>
              <li>クラス</li>
              <li>クラス</li>
            </ul>
          </div>
        </div>
      </div>

〇階

171

  • 30/60
  • 名前
      <div class="classSymbol-item5">
        <ul>
          <li>クラス</li>
          <li>クラス</li>
          <li>クラス</li>
        </ul>
      </div>
    </div>
  </div>
<article class="main">
      <div class="contents">
        <h1>〇階</h1>
        <div class="room-contents">
          <div class="roomNumber-item1">
            <p>171</p>
          </div>
          <div class="capacity-item2">
            <ul>
              <li>30&#047;60</li>
            </ul>
          </div>
          <div class="roomTeacher-item3">
            <ul>
              <li>名前</li>
            </ul>
          </div>
          <div class="facility-item4">
            <ul>
              <li>〇</li>
              <li>〇</li>
              <li>〇</li>
            </ul>
          </div>

          <div class="classSymbol-item5">
            <ul>
              <li>クラス</li>
              <li>クラス</li>
              <li>クラス</li>
            </ul>
          </div>
        </div>
      </div>
本文に 852 文字追加
ソース リンク

CSSでフレキシブルボックスを使ってこのような配置にしたいのですがどうすれば上手く配置できますか?
見にくくてすみません😓

 

〇階

171

  • 30/60
  • 名前
      <div class="classSymbol-item5">
        <ul>
          <li>クラス</li>
          <li>クラス</li>
          <li>クラス</li>
        </ul>
      </div>
    </div>
  </div>

CSSでフレキシブルボックスを使ってこのような配置にしたいのですがどうすれば上手く配置できますか?

 

CSSでフレキシブルボックスを使ってこのような配置にしたいのですがどうすれば上手く配置できますか?
見にくくてすみません😓

〇階

171

  • 30/60
  • 名前
      <div class="classSymbol-item5">
        <ul>
          <li>クラス</li>
          <li>クラス</li>
          <li>クラス</li>
        </ul>
      </div>
    </div>
  </div>
書式の改善
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

CSSでフレキシブルボックスを使ってこのような配置にしたいのですがどうすれば上手く配置できますか?(https://i.sstatic.net/UOUsZ.jpg)

CSSでフレキシブルボックスを使ってこのような配置にしたいのですがどうすれば上手く配置できますか?(https://i.sstatic.net/UOUsZ.jpg)

CSSでフレキシブルボックスを使ってこのような配置にしたいのですがどうすれば上手く配置できますか?

ソース リンク
読み込んでいます