我无法为此布局在html中创建列,请建议我该怎么做

这是我的代码

<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">

我想要这样的布局:

我无法为此布局在html中创建列,请建议我该怎么做

我有这个:

我无法为此布局在html中创建列,请建议我该怎么做

我无法为此布局在html中创建列,请建议我该怎么做

我该怎么办?

hongxiu1016 回答:我无法为此布局在html中创建列,请建议我该怎么做

我将使用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>

,

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

 <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>

,

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

        

本文链接:https://www.f2er.com/3151557.html

大家都在问