布尔玛的CSS - 划分瓷砖子框在2等宽瓷砖

我想做一个布局，我有2个父瓷砖一个是水平的，占用8列，另一个是垂直的，占用4列。我现在想要做的是在父级水平方块中放置子方块，取其父方瓦片中每个50％的宽度。这是我在我的代码如下所示：布尔玛的CSS - 划分瓷砖子框在2等宽瓷砖

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

现在，它看起来像这样：

我曾尝试加入到孩子箱-6级，但没有奏效，我该怎么办？

来源

2017-08-31 Leff

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

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

我加了一些IDS只是为了给元素的背景色和某些方面，他们”重新意味着被删除。

我希望它有帮助！

来源

2017-08-31 14:37:12 Tedds

这些块会出现堆积在片段中，这仅仅是因为浏览器的宽度。 – Tedds

布尔玛的CSS - 划分瓷砖子框在2等宽瓷砖

回答

相关问题