我想製作一個時間表,但它已經破壞了結構。我認爲這是因爲display:inline
,如果我想這樣做對我的網站:如何正確使用display:inline with ng repeat
它會打破它:
顯示inline-block的也funks起來。
我試圖display: inline
到overall
div包含時間軸,並沒有工作。那麼我對所有時間線上的div都做了這樣的事情,那也沒有用。
時間軸:
<span class = "timelinefull">
<div ng-controller="MainController">
<div class="timeline">
<!-- ANCHOR DOT -->
<div class= "dot">
<div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false" ng-mouseover="getCoords(event)">
<img class="icon" ng-src="img/icon_dot.png" height="30px" width="30px">
</div>
<div class="info label label-info" id="info" ng-show="infoIsVisible">
<p>Was born</p>
</div>
</div>
<!-- REST OF MY DOTS -->
<div class="dot" ng-repeat="timelineEvent in timelineEvents">
<timeline-info info="timelineEvent"></timeline-info>
</div>
</div>
</div>
</span>
模板NG-重複:
<div class="timeline-inner" ng-init="infoIsVisible= false">
<img class="line" src="components/timeline/template-timeline/img/line.png" height="5px" width="{{ info.months }}">
<div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false" ng-mouseover="getCoords(event)">
<a href="{{ info.link }}">
<img class="icon" id="icon" ng-src="{{ info.icon }}" height="30px" width="30px">
</a>
</div>
</div>
<div class="info label label-info" id="info" ng-show="infoIsVisible">
<p>{{ info.description }}</p>
<p style="font-size: 8px"> Click for more info </p>
</div>
CSS
.timelinefull {
display: inline;
}
.timeline-inner {
display: inline;
}
.info {
display: inline;
padding-top: 10px;
position: absolute;
z-index: 100;
-webkit-transition:all linear 0.3s;
transition:all linear 0.3s;
}
.line {
box-shadow: 0 0 0 2px rgba(0,0,0,.05);
margin-left: -5px;
margin-right: -5px;
}
.info.ng-hide {
opacity:0;
}
a:link {
text-decoration: none;
}
感謝您的幫助!
這並沒有幫我,謝謝雖然 – user5812721