布尔玛的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级,但没有奏效, 我该怎么办?
答
我猜标记可能会有点搞砸了,试试这个:
#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只是为了给元素的背景色和某些方面,他们”重新意味着被删除。
我希望它有帮助!
这些块会出现堆积在片段中,这仅仅是因为浏览器的宽度。 – Tedds