1

私のフィドルでは、テキストの区切りが表示されます。<hr>そこに a を配置して CSS で装飾したいのですが、これを行うとインラインブロックが壊れてしまうため、これを行う方法がわかりません。<hr>がブロック要素だからだと思います。これに関する創造的な解決策はありますか? 応答性を維持するために、テキストの 2 つの段落の間に固定する必要があります。

ありがとう！

フィドル

HTML:

<section>
    <div class="first">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, nisl id ultricies sollicitudin, neque sapien porta nisl, ut gravida elit quam id nisi. <br /><br />Nunc viverra laoreet porttitor. Duis augue justo, pellentesque a luctus eget, luctus a quam. Fusce nec neque nec dolor mattis tempor id vitae nisi.</p>
        <img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg">
    </div>
</section>

CSS:

.first {
    height: 100%;
    line-height: 0;
}

.first p {
    vertical-align: middle;
    display: inline-block;
    width: 49%;
}

.ipad {
    vertical-align: middle;
    display: inline-block;
    width: 49.2%;
}

 p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}
4

2 に答える 2

2

これがSerliteの答えの代替です。基本的に、<hr>CSS を使用して暗黙的に を挿入します。

フィドル

各コンテナの最初の段落を除いて、各段落の上部に境界線を追加します。 

p {
    ...
    border-top: 1px solid black;
}

p:nth-child(1) {
    border-top: none;
}
于 2013-08-05T02:44:22.920 に答える