1

我<div>在一个容器<div>中有不同数量的 s ，每个都设置为display:inline-block，有 a-webkit-border-radius和一些padding。我想以<div>一种方式定位每个 s，使右侧的一个与左侧的一个重叠，以便顶部和底部的边框没有中断。此外，理想情况下，容器<div>的宽度仅与内部样式化 div 的大小完全相同（LAST_DIV 的高度和宽度等于从最左侧到最右侧 div 的距离）。

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

由于<div>将显示的 s 数量不同，我排除了绝对定位。我想避免使用 javascript 或向 html 文档添加其他元素，因为我正在为同一个网站元素创建多个样式，并且其中一些样式可能没有必须<div>重叠的 rounded s。

编辑：

我尝试仅将边界半径设置为内部 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;重要。这意味着div容器中 s 之间的 HTML 中的换行符将在它们之间引入一个空格。对此有一些修复。我选择的一个涉及在</div>（子 div 的结束标记）和<div>（以下 div 的开始标记）之间添加注释。

于 2013-01-24T01:55:16.817 回答