Question

我需要这种类型的页面 desired output

其中显示了特定个人每年的成就，因为您可以看到它是动态的，如果有成就，则显示两行等等。我能够生成这个 Current output 。

但我无法获得这些点（或圆圈）。我尝试使用left-border border-image等等，但它会全部中断，因为它都是动态的，任何一年都可以有一个成就（或者没有，在那种情况下，它不会出现）或多达数十（我们没有任何最大限制，但它可以很多）。所以，如果我对图像做了些什么，那一切都会崩溃。

这是

页面

  <div class="achievements-details-container">
    @foreach (var group in groupedModel)
    {
        <div class="achievements-details-group">
            @for (var i = 0; i < group.Count(); i++)
            {
                var item = group.ElementAt(i);

                <div class="achievements-details">
                    <div class="achievements-details-main">
                        <div class="row">
                            <div class="col-md-1">
                            </div>
                            <div class="col-md-1">
                                @(i == 0 ? item.Year.ToString() : string.Empty)
                            </div>
                            <div class="achievement-title-before">
                            </div>
                            <div class="col-md-4 achievement-title">
                                @item.Title
                            </div>
                            <div class="col-md-1 smaller-padding-left">
                                <a href="#">
                                    <img src="@Url.Content("~/Images/achievement_arrow.png")" alt="achievement_arrow" class="achievement-arrow-open" /></a>
                            </div>
                            <div class="col-md-3">
                                @item.SmallSummary
                            </div>
                            <div class="col-md-2 achievements-action-buttons no-padding">
                                <div class="">
                                    @{Html.RenderPartial("_EditDiv", item.StatusID == (int)VersionStatus.Draft);}
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
            }                   
        </div>
    }
</div>

CSS

.achievements-details-container{

}
.achievements-details{

}
.achievements-details-main{

}
.achievement-title{
    font-family: Tahoma, Arial, Sans-Serif;
    font-weight: 600;
}
.achievements-details-group
{
    border-bottom: 1px solid #F0F0F0;
    margin-top: 1%;
}
.achievement-title-before:before 
/* This is the css that is giving me the border line, I don't know how to add css for that desired circle here */
/* I tried setting the content to something like '\2022' but it turned out terrible*/
/* I have that circle image as achievement_circle.png */
{
    content: '';
    border-right: 2px solid #EB5B1D;
    height: 500%;
    position: absolute;
    margin-top: -1%;
}
.achievements-details
{
    margin-bottom: 1%;
}
.achievements-action-buttons{

}
.no-padding 
{
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.small-padding-left
{
    padding-left: 8%;
}
.smaller-padding-left
{
    padding-left: 4%;
}
.xx-small-padding-left
{
    padding-left: 2%;
}

Answer 1

您可以使用：after伪元素生成此内容。

类似的东西：

.achievement-title-before:after {
  content: "";
  position: absolute;

  /*Set height and width*/
  height: 30px;
  width: 30px;

  /*make it circular, as well as have a background color*/
  border-radius: 50%;
  background: tomato;

  /*position this accordingly*/
  left: 0px;
  top: 5px;
}

尽管如此，您可能需要使用left:和top:值来改变定位

如何动态添加带图像的左边框

1 个答案: