Question

我的HTML代码中有一些文章，我想在每篇文章的左边放一个圆圈。这意味着，如果有办法做到这一点，而无需手动将圆圈放在每个完美的文章旁边。

我们的想法是将圆圈准确放置在我已经放置垂直线的位置（这基本上只是一个100％高度的div），这样就可以创建一种时间轴效果。

因为整个想法是要有这个时间轴（每个文章旁边的每个圆圈的线）和圆圈旁边的一年。

为了确保我足够清楚，我很快就在Photoshop上拍摄了我想到的结果。每个文章的灰色圆圈都是相同的，白色矩形应该能够包含文本。

Timeline

这是文章的HTML

<section class="content">   

        <article class="CV">

            <h1>Lorem ipsum dolor sit amet</h1>

            <p>
                Lorem ipsum ...

            </p>

        </article>
</section>

和CV类的CSS：

.content
{
    position: relative;
    top: 50px;
    left: 125px;
}

article
{
    background-color: #FFFFFF;
    border-left: 4px #E52522 inset;
    -webkit-box-shadow: 3px 2px 6px 1px rgba(50, 50, 50, 0.45);
    -moz-box-shadow:    3px 2px 6px 1px rgba(50, 50, 50, 0.45);
    box-shadow:         3px 2px 6px 1px rgba(50, 50, 50, 0.45);
}

.CV
{
    display: block;
    padding : 5px;
    margin: 20px 0px;
    opacity: 0.9;
    max-width: 800px;
}

我打算成为该行的代码（但它不起作用，它只是浏览器窗口的大小）：

#timeline
{
    background-image: url('img/tweed.png');
    width: 8px;
    height: 100%;
    position: absolute;
    left: 50px;
    -webkit-box-shadow: 2px 0px 6px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 0px 6px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 0px 6px 0px rgba(50, 50, 50, 0.75);
}

如果我的问题不清楚，请告诉我。谢谢。

编辑：如果需要，我可以为您提供更多代码。

Answer 1

您可以使用::before伪元素：

article:before{
    position:absolute;
    height:40px;
    width:40px;
    border-radius:20px;
    background-color:#777;
    content:'';
    display:block;
    top:10px;
    left:-90px;
}

具体款式由您决定。你的文章需要相对定位。

JSFiddle

Answer 2

您需要将年份的新元素添加到文章标记

<article>
    <span class="timestamp">2014</span>
    ...
</article>

然后将这些添加到您的CSS

article { position: relative }
article .timestamp { position: absolute; left: ??px; top: ??px; }
article .timestamp:before { content:''; width: 50px; border-radius: 50%; }

更多详细信息：http://jsfiddle.net/RdXw9/1/

Answer 3

尝试将圆圈放在文章中，然后将div img标记放在右边：“x”px ...

有点黑客的做法，我敢肯定李的风格可能会更好，但......应该有效

编辑：示例 CSS

#article img {
position:relative:right:50px;
}

HTML：

    <div id="article" class="CV">
<img src="#"> CIRCLE </img>

        <h1>Lorem ipsum dolor sit amet</h1>

        <p>
            Lorem ipsum ...

        </p>

    </div>

在每个<article> </article>外面放一个圆圈

3 个答案: