Question

我想制作一个时间轴，但它已经破坏了结构。我认为那是因为nuget.exe restore，如果我试图对我的网站这样做，那就会破坏它。 display:inline也很有趣。

我尝试display: inline-block到包含时间轴的display: inline div，但这不起作用。所以我对所有同样在时间轴上的div也这样做了。

时间轴：

overall

ng-repeat的模板：

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

CSS

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

感谢您的帮助！

Answer 1

尝试将以下内容添加到CSS中

let rectForBall = rect // the parameter from `drawRect:`

<强>更新

在黑暗中拍摄，没有片段..

你能加入你的CSS

吗？

    import Foundation

    func readFile(path: String) -> Array<String> {

        do { 
            let contents:NSString = try NSString(contentsOfFile: path, encoding: NSASCIIStringEncoding)
            let trimmed:String = contents.stringByTrimmingCharactersInSet(NSCharacterSet.whitespaceAndNewlineCharacterSet())
            let lines:Array<String> =  NSString(string: trimmed).componentsSeparatedByCharactersInSet(.newlineCharacterSet())
            return lines
        } catch {
            print("Unable to read file: \(path)");
            return [String]()    
        }    
    }

    let lines = readFile("./somefile.txt")
    print("Read \(lines.count) lines from file: \(lines)")

以上代码将垂直居中.timeline, .timeline .dot, .timeline-inner, .timelinefull { display:inline-block; } .timeline, .timelinefull { width:100%; }。从您的screenshot看来，因为元素现在是.dot .timeline-inner { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }，它们只占用所需的空间（正确的行为），但是，您需要元素在{{1}内垂直对齐}}。

Answer 2

您有3个选项可供选择CSS中元素的display属性：

内嵌元素：

尊重左派＆amp;右边距和填充，但不 top＆amp;底
无法设置宽度和高度
允许其他元素左右坐着。

阻止元素：

尊重所有这些
在块元素

内联块元素：

允许其他元素左右坐着
尊重顶级＆amp;底部边距和填充
尊重身高和宽度

因此，最好为这些类的元素添加display:inline-block：

点
时间轴的内

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

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

将div元素内联

2 个答案: