我无法在html中创建此布局的列，请建议我该如何做

Question

这是我的代码

​

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://s21466.pcdn.co/wp-content/uploads/2018/02/Logo-FIVB-Liga-nacija-1.jpg" width="500" height="640">
    </div>
    <div class="col-md-3">
      <img src="https://i.ytimg.com/vi/hDUG_ZCg5N8/maxresdefault.jpg" width="320" height="213">
      <img src="https://www.4baht.com/wp-content/uploads/2019/05/turkey-women-team-preview-volley.jpg" width="320" height="213">
      <img src="https://www.4baht.com/wp-content/uploads/2019/05/germany-women-team-preview-volle.jpg" width="320" height="213">
    </div>
    <div class="col-md-3">
      <img src="https://cdn8.volleyball.it/wp-content/uploads/2018/10/VNL-Femminile-2019.jpeg" width="320" height="426">
      <img src="https://seekvectorlogo.net/wp-content/uploads/2019/04/federation-internationale-de-volleyball-fivb-vector-logo.png" width="320" height="213">

​

我想要这样的布局：

​

​

我有这个：

​

​

​

​

我该怎么做呢？

Answer 1

我会使用Grid布局:例如，使用grid-template设置可用区域的位置，然后使用grid-area将特定区域分配给元素

​

main {
  display: grid;
  grid-template: 
     "c1 c1 c2 c5"
     "c1 c1 c3 c5"
     "c1 c1 c4 c6"
}

section {
  border: 1px #446 solid;
  margin: 2px;
  min-height: 100px;
}

.c1 { grid-area: c1; }
.c2 { grid-area: c2; }
.c3 { grid-area: c3; }
.c4 { grid-area: c4; }
.c5 { grid-area: c5; }
.c6 { grid-area: c6; }

<main>
  <section class="c1">1</section>
  <section class="c2">2</section>
  <section class="c3">3</section>
  <section class="c4">4</section>
  <section class="c5">5</section>
  <section class="c6">6</section>
</main>

​

Answer 2

您没有正确使用列。使用此代码

​

 <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="https://s21466.pcdn.co/wp-content/uploads/2018/02/Logo-FIVB-Liga-nacija-1.jpg" width="500" height="640">
            </div>
            <div class="col-md-3">
                <img src="https://i.ytimg.com/vi/hDUG_ZCg5N8/maxresdefault.jpg" width="320" height="213">
                <img src="https://www.4baht.com/wp-content/uploads/2019/05/turkey-women-team-preview-volley.jpg" width="320" height="213">
                <img src="https://www.4baht.com/wp-content/uploads/2019/05/germany-women-team-preview-volle.jpg" width="320" height="213">
            </div>
            <div class="col-md-3">
                <img src="https://cdn8.volleyball.it/wp-content/uploads/2018/10/VNL-Femminile-2019.jpeg" width="320" height="426">
                <img src="https://seekvectorlogo.net/wp-content/uploads/2019/04/federation-internationale-de-volleyball-fivb-vector-logo.png" width="320" height="213">
            </div>
        </div>
    </div>

​

Answer 3

请检查您的文件中是否已正确链接引导程序。