4

<hr>上下に余白のある「クリア」タグがあります。ただし、2つの浮動要素を列として使用した後は、上マージンは無視され、行はテキストのすぐ下に配置されます。

CSS：

hr {
    width: 100%;
    height: 1px;
    border: 1px;
    background-color: #d3d7cf;
    color: #d3d7cf;
    clear: both;
    margin: 16px auto;
}
.column {
    text-align: center;
    float: left;
    margin-right: 16px;
    width: 200px
}

HTML：

<hr/>
<div class="column">asd<br />fgh</div>
<div class="column">asd</div>
<hr/>

divの列をでラップできることがわかりましたがoverflow: hidden、HTMLにマークアップを追加する必要がない解決策はありますか？

4

2 に答える 2

3

「列」クラスに margin-bottom: 16px を追加します。

または、列にパディングを追加します (列クラスで境界線を使用している場合は明らかにそうではありません)。

于 2009-09-12T01:16:25.357 に答える
3

スタイルに追加float:leftしHRます。

これでHR、floated と同じフローで再生がDIV行われ、CSS の最初のバージョンでは欠けていた上部マージンが適用されます。

于 2009-09-12T01:07:51.147 に答える