Ankündigung

Einklappen
Keine Ankündigung bisher.

Zwei Elemente nebeneinander (eines fix und eines dynamisch)

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zwei Elemente nebeneinander (eines fix und eines dynamisch)

    Hallo,

    Zunächst mal sorry für den schlechten Titel, aber ich weiß leider nicht, wie ich mein Problem sonst beschreiben soll.
    Hier mal die ausführliche Version:
    Ich habe zwei Elemente nebeneinander, das eine ist eine Status-Grafik, die sich ändern kann, aber immer gleich groß ist.
    Rechts daneben befindet sich ein Container, in den per AJAX weitere Grafiken gefüllt werden. Die Anzahl dieser und somit auch die Breite des Containers ist immer unterschiedlich.
    Nun habe ich das Problem, dass bei sehr vielen Grafiken der Container in eine neue Zeile umbricht, was dann etwa so aussieht:
    Code:
    <Statusgrafik> <Grafik> <Grafik> <Grafik> <Grafik>
     <Grafik> <Grafik>
    Ich möchte aber, dass es so aussieht:
    Code:
    <Statusgrafik> <Grafik> <Grafik> <Grafik> <Grafik>
                   <Grafik> <Grafik>
    Ich hoffe, es ist klar was ich meine.
    Die neue Zeile soll quasi erst an der Stelle beginnen, wo auch oben drüber das Element an sich beginnt.

    Ich habe schon gegoogelt und verschiedene Sachen ausprobiert (float: left, display: inline-block, overflow: hidden, ...), konnte das Problem aber nicht lösen.
    Hat jemand eine Idee, wie man das umsetzen kann?

    Gruß
    MeckMeck

  • #2
    Packs in zwei container rein

    Code:
    <container1>    <container2>
    <Statusgrafik>  <Grafik> <Grafik> <Grafik> <Grafik>
                    <Grafik> <Grafik> <Grafik> <Grafik>
                    <Grafik> <Grafik>
    </container1>   </container2>
    The string "()()" is not palindrom but the String "())(" is.

    Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
    PHP.de Wissenssammlung | Kein Support per PN

    Kommentar


    • #3
      Hallo,

      darauf bin ich auch schon gekommen und habe verschiedenes probiert (div, span, ...), aber die wurden immer entweder untereinander angezeigt, oder mit dem falschen Zeilenumbruch wie beschrieben.
      Wie genau muss ich die einzelnen Container denn definieren, damit sie das von mir gewünschte Verhalten zeigen?

      Kommentar


      • #4
        Ich meinte sowas in der Art: https://jsfiddle.net/ax7jhLbt/
        The string "()()" is not palindrom but the String "())(" is.

        Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
        PHP.de Wissenssammlung | Kein Support per PN

        Kommentar


        • #5
          Vielen Dank, das funktioniert.
          Auf eine fixe Positionsangabe bin ich gar nicht gekommen.

          Nur rein aus Interesse: Gäbe es auch eine Lösung, wenn beide Container in der Größe dynamisch wären?

          Kommentar


          • #6
            1) display:inline-block und width: auto
            2) float: left und width: auto
            3) display: flex und flex: 0 0 auto; und width: auto

            An deiner Stelle würde ich mir mal grid systeme ansehen, damit solltest du die meisten Layoutprobleme locker in den Griff bekommen.

            VG

            Basti
            I like cooking my family and my pets.
            Use commas. Don't be a psycho.
            [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

            Kommentar

            Lädt...
            X