Question

我想在我的页面上添加一个tweetline小部件，位于about部分的右侧。虽然我实现了它，但它有一种特殊的行为，因为它有时会很完美：

有时，当我保存.css和.html文件时，它看起来像这样：

知道为什么会发生这种情况以及如何解决上述问题？这是CSS：

        #about {
            padding:40px 20px;
            overflow:hidden;
        }

        .twitter-timeline, .timeline-section {
            float:left;
        }
        /* Timeline Section */
        .timeline-section {
            width:490px;
            padding-right:60px;
        }

        .timeline {
            margin-bottom: 30px;
        }
        .timeline li {
            margin-bottom:20px;
        }
        .timeline li .timelineUnit {
            line-height:17px;
            margin-left:0px;
            color: #444;
            font-size:13px;
            border-left:1px solid /*mainColor*/#000000;
            padding-left:15px;
        }
        .timeline li .timelineUnit .timelineDate {
            line-height:17px;
            color:/*mainColor*/#000000;
            font-size:14px;
            margin-left:10px;
            font-weight: normal;
            padding:2px 6px;
            float:right;
        }
        .timeline li .timelineUnit h4 {
            line-height:24px;
            font-size:15px;
            color: #444;
        }
        .timeline li .timelineUnit h5 {
            line-height:18px;
            font-size:13px;
            color: #999;
        }
        .timeline li .timelineUnit p {
            color: #666;
            font-size:12px;
            margin-top:5px;
        }

Answer 1

如果您发布了整个页面代码，我可以更好地自定义我的答案，但这只是定义宽度和使用浮动来排列内容的问题。我给了您.timeline-section一个max-width: 50%和float: left以及.twitter-timeline我给了max-width: 50%和float: right。它适用于以下小提琴。如果您还有问题，请告诉我。

https://jsfiddle.net/o7sxoton/1/

*****修订*****

感谢您更新问题。原谅小提琴的原始设计，但我希望你看看这些元素是如何排列的。什么推动你的twitter元素是section元素。通过将max-width: 60%应用于#about id，我们告诉整个容器不要超过视口的60％（不需要将它添加到时间轴部分类，除非您希望该元素小于实际的部分标签）允许你的twitter元素空间正确浮动在右边。我还在该元素中添加了display: inline-block，因此它最终会与twitter元素对齐。

其次，我给了twitter-timeline元素一个max-width: 30%（随意调整这些值你认为合适并记得在计算中考虑你的填充）浮动该元素并且还应用了{{1 }}。我只给了元素一个设置的高度，宽度和背景颜色，这样你就可以看到它现在与主列的右侧对齐。我希望这能回答你的问题。

请参阅下面的更新小提琴 https://jsfiddle.net/kdec97vr/1/

如何在时间轴的右侧添加推文？

1 个答案: