块在不同宽度的html页面中的原始 [英] blocks in a raw in html page with different width

问题描述

我有这个小提琴，它有三个等宽的块。我们如何做到不同的尺寸，假设100％，第一块20％，第二块50％和第三30％。

I have this fiddle which has three blocks of equal width. How can we make this of different sizes, say given 100%, first block 20%, second block 50% and the third 30%.

<div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div><div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div>


.Row
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
}
.Column
{
    display: table-cell;
    background-color: red;
}

推荐答案

$ c> nth-child ：

You could use nth-child:

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background-color: red;
}

.Column:nth-child(1) {
  width:20%;
}
.Column:nth-child(2) {
  width:50%;
}
.Column:nth-child(3) {
  width:30%;
}

<div class="Row">
  <div class="Column">C1</div>
  <div class="Column">C2</div>
  <div class="Column">C3</div>
</div>

这篇关于块在不同宽度的html页面中的原始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！