CSS使用较少的行清除样式行

Question

我正在努力实现代表一个普通的

<table>
    <tr>
        <td>content</td>
        <td>content</td>
    </tr>
    <tr>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

进行占宽度百分比的行

<div class="line">
    <div class="col25">
        content
    </div>
    <div class="col25">
        content
    </div>
    <div class="col25">
        content
    </div>
    <div class="col25">
        content
    </div>
</div>
<div class="clear-both"></div>

但是对于每一行，我需要clear-both这是重复的，我特别想要它的百分比，线的样式是100％宽度，每列占一定的百分比，但我希望列占据整个宽度这一行。

Answer 1

你可以使用这种HTML / CSS：

＆＃13;

＆＃13;

.col5 { width: 5%; }
.col10 { width: 10%; }
.col15 { width: 15%; }
.col20 { width: 20%; }
.col25 { width: 25%; }
.col30 { width: 30%; }
.col35 { width: 35%; }
.col40 { width: 40%; }
.col45 { width: 45%; }
.col50 { width: 50%; }
.col55 { width: 55%; }
.col60 { width: 60%; }
.col65 { width: 65%; }
.col70 { width: 70%; }
.col75 { width: 75%; }
.col80 { width: 80%; }
.col85 { width: 85%; }
.col90 { width: 90%; }
.col95 { width: 95%; }
.col100 { width: 100%; }

.line {
    margin: 5px 0;
    overflow: hidden;
}
.col {
    display: block;
    float: left;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    background: blue;
    color: white;
}
.col:nth-child(2n) {
    background: red;
}

＆＃13;

<div class="line">
    <div class="col col25">
        content
    </div>
    <div class="col col25">
        content
    </div>
    <div class="col col25">
        content
    </div>
    <div class="col col25">
        content
    </div>
</div>
<div class="line">
    <div class="col col60">
        content
    </div>
    <div class="col col40">
        content
    </div>
</div>
<div class="line">
    <div class="col col100">
        content
    </div>
</div>
<div class="line">
    <div class="col col10">
        content
    </div>
    <div class="col col20">
        content
    </div>
    <div class="col col70">
        content
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;