Question

我正在尝试制作一个布局，其中我有2个父级图块，一个是水平的，占用8列，另一个是垂直的，占用4列。我现在要做的是将子框放在父级水平图块中，将每个50％的宽度放在父图块中。这就是我的代码：

    <div class="container">
        <div class="tile is-ancestor">
          <div class="tile is-parent is-8">
              <div v-for="article of latestNews" >
                 <div class="tile is-child box">
                    <div class="post-wrapper">
                     <span class="tag is-info">{{ article.tag }}</span>
                     <h4 class="title is-4">{{ article.title }}</h4>
                     <p>{{ main ? article.excerpt : article.created_at.date.substring(0, 10) }}</p>
                    </div>
                 </div>
              </div>
          </div>
          <div class="tile is-vertical is-4">
            <div v-for="article of mostReadNews" >
              <media-object :article="article" :main="true"></media-object>
            </div>
          </div>
      </div>
    </div>

现在，它看起来像这样：

我已经尝试添加到子框is-6课程，但这不起作用，我该怎么办？

Answer 1

我猜标记可能有点搞砸了，试试这个：

#tile1 {
  background-color: darkturquoise;
  height: 200px;
} 

#tile2 {
  background-color: tomato;
  height: 200px;
} 

#tile3 {
  background-color: aquamarine;
  height: 200px;
} 

#tile4 {
  background-color: slategray;
  height: 200px;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css">
</head>
  
<body>
  <div class="container">
    <div class="tile is-ancestor">
        <div class="tile is-4 is-parent" >
            <div class="tile is-child box" v-for="article of latestNews" id="tile1">
                <div class="post-wrapper">
                   <span class="tag is-info">{{ article.tag }}</span>
                     <h4 class="title is-4">{{ article.title }}</h4>
                     <p>{{ main ? article.excerpt : article.created_at.date.substring(0, 10) }}</p>
                </div>
             </div>
         </div>
      
        <div class="tile is-4 is-parent" >
            <div class="tile is-child box" v-for="article of latestNews" id="tile2">
                <div class="post-wrapper">
                   <span class="tag is-info">{{ article.tag }}</span>
                     <h4 class="title is-4">{{ article.title }}</h4>
                     <p>{{ main ? article.excerpt : article.created_at.date.substring(0, 10) }}</p>
                </div>
             </div>
         </div>      
      
         <div class="tile is-vertical is-parent is-4"  v-for="article of mostReadNews">
           
            <div class="tile is-child" id="tile3">
              
              <div v-for="article of mostReadNews" >
                <media-object :article="article" :main="true"></media-object>
              </div>
              
            </div>
           
            <div class="tile is-child" id="tile4">
              
              <div v-for="article of mostReadNews" >
                <media-object :article="article" :main="true"></media-object>
              </div>
              
            </div>

         </div>  
      
     </div>
</div>

<body>

我添加了一些ID只是为了给元素一个背景颜色和一些尺寸，它们意味着被删除。

我希望它有所帮助！

Bulma css - 将瓷砖子框分成2个相等宽度的瓷砖

1 个答案: