Wie füge ich eine Tweetline zur rechten Seite einer Timeline hinzu?

Question

Ich möchte meiner Seite ein Tweet-Widget hinzufügen, auf der rechten Seite des About-Bereichs. Obwohl ich es erreichen, hat es ein Verhalten strage da manchmal funktioniert es perfekt:

Und manchmal, gerade als ich die CSS speichern und Html-Datei sieht es so aus:

Jede Idee, warum dies geschieht und wie man das oben erwähnte Problem beheben kann ?. Dies ist die 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

Wenn Sie die Gesamtheit dieser Seiten Code schreiben ich besser meine Antwort anpassen kann, aber dies sollte nur ein Problem sein, die Breite zu definieren und mit Schwimmern Ihre Inhalte zu organisieren. Ich gab .timeline-section eine max-width: 50% und float: left und die .twitter-timeline I gab eine max-width: 50% und float: right. Es funktioniert in der unteren Geige. Lassen Sie es mich wissen, wenn Sie noch ein Problem haben.

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

***** ***** AKTUALISIERT

Vielen Dank für Ihre Frage zu aktualisieren. Verzeihen Sie das grobe Design der Geige, aber ich wollte, dass Sie sehen, wie sich die Elemente anordnen. Was Ihr Twitter-Element nach unten drückte, war das section Element. Durch Anwenden einer max-width: 60% auf die #about ID teilen wir mit, dass der gesamte Container nicht über 60% des Ansichtsfensters hinausgehen soll (es muss nicht zur Zeitachsenabschnittsklasse hinzugefügt werden, es sei denn, Sie möchten dieses Element kleiner als das tatsächliche Abschnitts-Tag) Twitter-Element, um richtig auf der rechten Seite zu schwimmen. Ich fügte auch eine display: inline-block zu diesem Element hinzu, so dass es sich schließlich mit dem twitter-Element ausrichten würde.

Zweitens gab ich dem twitter-timeline Element eine max-width: 30% (Fühlen Sie sich frei, diese Werte anzupassen, wie Sie für richtig halten und denken Sie daran, Ihr Padding in der Berechnung zu berücksichtigen) floated das Element und auch eine display: inline-block. Ich habe dem Element eine Höhe, eine Breite und eine Hintergrundfarbe zugewiesen, sodass Sie sehen können, dass es jetzt rechts von Ihrer Hauptspalte ausgerichtet ist. Ich hoffe, das beantwortet deine Frage.

die aktualisierte Geige unter https://jsfiddle.net/kdec97vr/1/