CSS Relative Positionierung Funktioniert Nicht

Aus irgendeinem Grund kann ich nicht bekommen, mein Bild, um die position rechts neben dem Twitter-feed. Ich positionierte ihn relativ innerhalb des DIV-tags der twitter-feed, aber es bleibt unten. Hier ist der live link: http://www.lymemd.org/indexmm6.php

Mein CSS:

#twitterfeed {
    position: relative;
}

#drshow {
    position: relative;
    left: 200px;
}

Mein HTML:

<div id="twitterfeed">
<a class="twitter-timeline" width="460" height="250"  href="https://twitter.com/Lyme_MD" 
data-widget-id="453198382664667137">Tweets by @Lyme_MD</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s); js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="drshow">
<img src="images/drshow.gif" alt="Diane Rehm Show Image" width="169" height="145">
</div>

</div>
InformationsquelleAutor Eric | 2014-04-07
  1. 4

    Hinzufügen display:inline-block scheint es fix:

    #drshow { position: relative; display:inline-block }
    • Das hat es, danke. Wissen Sie, warum es notwendig dass? Sehr neu in CSS und es ist auch nicht klar, warum es notwendig die Anzeige "inline" - Eigenschaft, um es zu ändern. Was bedeutet es?
    • Nur wollen eine Antwort auf Eric ' s Kommentar. Blockelemente beginnen immer in einer neuen Zeile, und nehmen die ganze Breite, (siehe w3schools.com/html/html_blocks.asp). Inline-block-Elemente nicht starten Sie eine neue Zeile und ermöglichen Elemente auf beiden Seiten von Ihnen. Siehe stackoverflow.com/questions/9189810/...
    InformationsquelleAutor potashin
  2. 3

    Warum nicht schwimmt?

    .twitter-timeline {
    float: left;
}

#bannerArea {
    clear: left;
}

    Nicht sicher, ob die #bannerArea ist, wo Sie möchten klar, aber es ist ein Anfang! Ein großer Vorteil ist, dass das layout anpassen wird, wenn der Besucher der Bildschirm ist zu schmal, um die Anzeige sowohl horizontal als. Sie können auch die float zu anderen wichtigen Elemente, und Sie müssen nicht sorgen zu machen über die relative oder absolute Positionierung.

    • Danke für deine Antwort. Ich denke, dass die Schwimmer der richtige Weg zu gehen. Aber jetzt bin ich hier: lymemd.org/indexmm6.php Wie gehe ich über die Positionierung der audio-player unter dem Bild und zentrieren Sie die beiden rechts von der twitter-feed? Muss ich DIVs für alles? Vielen Dank für Euch Hilfe im Voraus!!
    • Zum starten ja, Sie können die Kapseln die Spieler und Bild in einer einzigen div (Was haben Sie als #drshow schon). Auf das div, die Sie anwenden würde text-align: center;, und in der HTML -, ich würde noch ein <br /> nach dem Bild. Jedoch, wenn die Höhe des Bildes wird höher als die Höhe des twitter-feed, der Spieler wird-center auf der Seite und nicht direkt unter dem Bild.
    • Vielen Dank für deine Hilfe, das hat funktioniert! Nun mein Nächster Schritt wird sein, die Aufteilung, die ganze #BannerArea in zwei separate Abschnitte...nicht sicher, wie einfach, dass wird es beweisen.
    InformationsquelleAutor Sunny Patel
  3. 0

    Wenn #twitterfeed ist position:relative, #drshow muss position:absolute um dies zu erreichen.

    #drshow {
    position: absolute;
    top: 0px;
    left: 30px;
}
    InformationsquelleAutor ramesh
Schreibe einen Kommentar