html - 内嵌 div 元素

Question

我想制作一个时间轴，但它的结构已损坏。我认为这是因为 display:inline，如果我试图对我的网站这样做，它会破坏它。display: inline-block 也让它变得有趣。

我尝试将 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-repeat 模板:

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

感谢您的帮助!

Answer 1

您有 3 个选项，可以为 CSS 中元素的 display 属性进行选择:

内联元素:

1. 尊重左右边距和填充，但不顶部和底部
2. 不能设置宽度和高度
3. 允许其他元素位于它们的左右两侧。

block 元素:

1. 尊重所有这些
2. 在 block 元素之后强制换行

行内 block 元素:

1. 允许其他元素位于它们的左右两侧
2. 尊重顶部和底部的边距和填充
3. 尊重高度和宽度

因此，最好为具有这些类的元素放置 display:inline-block:

• 点
• 内部时间轴

像这样:

timeline dot, timeline timeline-inner{
    display: inline-block;
}

请不要忘记花足够的时间提供一个总结的、有用的代码版本，包括标记和CSS，让人们重现最终结果。