Bulma css - 将瓷砖子框分成2个等宽的瓷砖答案

【问题标题】：Bulma css - dividing tile child boxes in 2 equal width tilesBulma css - 将瓷砖子框分成2个等宽的瓷砖
【发布时间】：2017-08-31 22:37:12
【问题描述】：

我正在尝试制作一个布局，其中我有 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 类，但没有奏效，我该怎么办？

【问题讨论】：

标签： css bulma

【解决方案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 只是为了给元素一个背景颜色和一些尺寸，它们应该被删除。

希望对你有帮助！

【讨论】：

块在sn-p中会出现堆叠，只是因为浏览器的宽度。