html - 使用 CSS 动态调整内容的高度

Question

<分区>

Answer 1

首先，仅使用纯 CSS 是不可能动态调整属性的，例如另一个元素的属性。 em 取决于字体、百分比值和事实，父元素通常总是增长以包含其子元素，这使得在您的示例中使用 articleContainers 非常完美。

因此，为了解决这个特殊问题，我将使用 .articleContainerRight 的 border-left 属性和 的 border-right .articleContainerLeft 分别扩展在 :after 语句中创建的行，因为边框会随着元素自动增长。如果您随后对 main- 和 articleContainer 的边距和填充进行一些试验，您可以管理它在任何情况下独立于它们的高度进行连接。

我为使您的示例生效所做的更改:

.mainContent {
    ...
    margin: 0 5em;
    ...
}

.articleContainerRight {
    ...
    left: 12em;
    border-left: 6px solid #666;
    margin-left: 5px;
    padding-left: 4em;
    padding-bottom: 1em;
}

.articleContainerLeft {
    ...
    border-right: 6px solid #666;
    width: 110px;
    padding-bottom: 1em;
}

以及完整的更新代码段:

.mainContent {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;
    position: relative;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    margin: 0 5em;
    font: 32px Arial, sans-serif;
}

.mainContent::after{
  content: '';
  position: absolute;
  top: 0em;
  left: 0.72em;
  width: .2em;
  height:4em;
  background: #666;
  z-index: -1;
}

.mainContent:last-child::after {
  display: none;
}

.articleContainerRight{   
    position: relative;
    top: 1em;
    left: 12em;
    font: 15px Arial, sans-serif;
    border-left: 6px solid #666;
    margin-left: 5px;
    padding-left: 4em;
    padding-bottom: 1em;
}

.articleContainerLeft{   
    position: relative;
    top: 1em;
    right: -5em;
    font: 15px Arial, sans-serif;
    border-right: 6px solid #666;
    width: 110px;
    padding-bottom: 1em;
}

.articleContainer{
    padding-bottom: 10px;
}

.spanContainer{
    color: blue;
}

<div class="mainContent">1</div>
<div class="articleContainerRight">
    <div class="articleContainer">
        <span class="spanContainer">test1</span>
    </div>
	 <div class="articleContainer">
        <span class="spanContainer">test12</span>
    </div>
     <div class="articleContainer">
        <span class="spanContainer">test13</span>
    </div>
</div>
<div class="mainContent">2</div>
<div class="articleContainerLeft">
    <div class="articleContainer">
        <span class="spanContainer">test2</span>
    </div>
	<div class="articleContainer">
        <span class="spanContainer">test20</span>
    </div>
    
</div>
<div class="mainContent">3</div>