1

<div>コンテナ内にさまざまな数のsがあり<div>、それぞれがに設定されdisplay:inline-blockており、-webkit-border-radiusといくつかがありpaddingます。<div>上下の境界線が途切れないように、右の方が左の方と重なるように配置したいと思います。また、理想的には、コンテナ<div>の幅は、内部のスタイル設定されたdivのサイズとまったく同じです（LAST_DIVの高さと、左端から右端までの距離に等しい幅）。

                         --------------------------------
   -------------------- / \
 / / | |
| DIV_1 | DIV_2 | LAST_DIV |
 \ \ | |
   ------------------- \ /
                         --------------------------------

表示されるsの数は<div>さまざまであるため、絶対位置を除外しました。同じウェブサイト要素に対して複数のスタイルを作成しているため、javascriptやhtmlドキュメントへの要素の追加は控えたいと思います。これらのスタイルの中<div>には、重複する必要のある丸められたものがない場合があります。

編集：

内側のdivの左端に境界線の半径のみを設定し、コンテナーdivに上下の境界線を設定しleft、コンテナーdivの重複する境界線が消えるまで負の値を設定してみました。すべてのdivが同じ高さである場合、コンテナdivが右端に拡張されたため、これにより右端で問題が発生しました。これは、個々のdivの色が異なる場合にも問題が発生しました。

4

1 に答える 1

3

次のように試すことができます。

デモ

HTML：

<div class='container'>
    <div>DIV_1</div><!--
    --><div>DIV_2</div><!--
    --><div>LAST_DIV</div>
</div>

関連するCSS：

.container, .container div { display: inline-block; }
.container div {
    padding: .25em 1.25em;
    border-radius: .65em 0 0 .65em;
}
.container div:not(:first-child) {
    margin: 0 0 0 -.65em; /* negative left margin, same value as border-radius */
}
.container div:last-child {
    padding: 1.25em;
    border-radius: .65em;
}

ノート

それらに設定されている要素間のあらゆる種類の空白（スペース、タブ、改行）がdisplay: inline-block;重要です。これは、コンテナ内のの間にあるHTMLの改行が、divそれらの間にスペースを導入することを意味します。これにはいくつかの修正があります。私が選択したのは、</div>（子divの終了タグ）と<div>（次のdivの開始タグ）の間にコメントを追加することです。

于 2013-01-24T01:55:16.817 に答える