Bulma css - 2等分幅のタイルでタイルの子ボックスを分割する

私は2つの親タイルを持つレイアウトを作成しようとしていますが、1つは水平で8つのカラムを持ち、もう1つは垂直で4つのカラムを取ります。私が今したいのは、親の水平タイルに子ボックスを入れ、その親タイルの内側の幅の50％ずつを取ることです。私は子供ボックスに追加しようとしているBulma css - 2等分幅のタイルでタイルの子ボックスを分割する

-で6クラスが、それは動作しませんでした。今

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

、それは次のようになります。これは私が私のコードは次のようになります、私は何をすべきか？

出典

2017-08-31 Leff

私はこれにしようと、マークアップが少し台無しにするかもしれないと思う。私は、彼らは「、ちょうど要素に背景色といくつかの次元を与えるためにいくつかのIDを追加

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

削除されることを意味します。

私はそれが助けてくれることを願っています！

出典

2017-08-31 14:37:12 Tedds

ブロックはスニペットに積み重なって表示されます。これはブラウザの幅のためです。 – Tedds

Bulma css - 2等分幅のタイルでタイルの子ボックスを分割する

答えて

関連する問題