Question

我正在尝试创建时间轴并在时间之间添加内容。当我向articleContainerRight或articleContainerLeft添加内容时，我需要背景矩形来动态调整高度并连接到主要内容的圆圈。

这是我的

CSS

.mainContent {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;
    position: relative;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    margin: 1em 5em 0;
    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: 17em;
    font: 15px Arial, sans-serif;
}

.articleContainerLeft{   
    position: relative;
    top: 1em;
    right: -5em;
    font: 15px Arial, sans-serif;
}

.articleContainer{
    padding-bottom: 10px;
}

.spanContainer{
    color: blue;
}

HTML

<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>

Answer 1

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

因此，要解决此特定问题，我将分别使用border-left的{{1}}属性和.articleContainerRight border-right来扩展在：after语句中创建的行，因为边框会随着元素自动增长。如果你稍微尝试一下main-和articleContainers的边距和填充，你可以管理它在各种情况下独立于它们的高度连接。

我为让您的示例发挥作用所做的更改：

.articleContainerLeft

完整更新的代码段：

＆＃13;

.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;
}

＆＃13;

.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;
}

＆＃13;

Answer 2

也许在border-left而不是.articleContainerRight & .articleContainerLeft使用::after。

检查一下（我已更新.articleContainerRight样式）：http://jsfiddle.net/Lyvdbtxo/

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

2 个答案: