html - 具有较少行清除的 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 :

.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;
}

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