Question

我目前正在开发一个应用程序，其中我有一个包含不同类别的通知面板。类别按图像和虚线划分，但如何将该虚线的高度设置为自动，以便在添加新通知时自动更改其高度。

这是代表问题的FIDDLE。

通常我将此作为我的HTML：

<div class="departure-wrapper">
            <div class="ui-grid-a">
              <div class="ui-block-a">
                <span class="departure-img">
                  <img class="image" src="img/icons/car.png">
                </span>
              </div>

              <div class="ui-block-b">
                <h4>Vertrek</h4>
                <div class="departure-notification-append"></div>
              </div>
            </div>
          </div>

我在js中附加新添加的通知departure-notification-append类

if (category === 'vertrek'){
               departureHtml = `
                ${departureHtml}
                <div class='notification-item' style='${style}'>
                    <div class='ui-grid-a notification-grid'>
                        <div class='ui-block-a'>
                            <img class='notification-image' id='${id}' src='${imgPath}'>
                        </div>
                        <div class='ui-block-b'>
                            <span class='notification-text'>${shortmessage}</span>
                        </div>
                    </div>
                </div>`;

            $('.departure-notification-append').empty().prepend(departureHtml);
        }

所以我的问题是如何将虚线设置为自动高度，当我现在做虚线的高度是1px或其他什么时。我希望有人可以帮我解决这个问题。

Answer 1

在父div上使用:afrer，如下所示

.departure-wrapper:after {
  content: '';
  display: block;
  position: absolute;
  top: 88px;
  left: 60px;
  width: 0;
  height: 100%;
  border: 1px dashed white;
}

试试这个http://jsfiddle.net/7uygyvwo/

高度自动后img上的虚线

1 个答案: