jQuery Mauerwerk mit prozentualer Breite

gibt es eine Möglichkeit zu bekommen, jquery Mauerwerk, arbeiten mit prozentualer Breite divs?
Ich bin versuchen, um eine fluid-layout mit 25%, 50%, 75% und 100% der Breite. Aber sobald ich die breiten mit % die automatische Größenanpassung funktioniert und wenn ich versuche manuell auslösen mason onresize bekomme ich Rundungsfehler macht die divs herum springen. Auch wird es Recht buggy ist, dass es manchmal ignoriert der Höhe, und manchmal einfach aufhört Platzierung der divs und legen Sie Sie alle auf 0,0

HTML-markup:

    <div class="boxes">
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-2">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-3">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

CSS-Eigenschaften:

.weight-1 {
width:25%;
}

.weight-2 {
width:50%;
}

.weight-3 {
width:75%;
}

.weight-4 {
width:100%;
}

Muchos gracias für jede Eingabe,
J

InformationsquelleAutor der Frage joe_g | 2011-12-09

  1. 7

    ich habe das gleiche problem, versuchen, versuchen, versuchen, und diese Arbeit für mich.

    .masonry-brick {
   width:25%;/*or others percents*/

   /*following properties, fix problem*/
   margin-left:-1px;
   transform:translateX(1px);
}

    InformationsquelleAutor der Antwort Darlan Mendonça

  2. 1

    Ich hatte das gleiche problem ... gelöst mit css calc-option. Das funktioniert auch, aber nicht auf die Größe des windows, dann wird es ein bisschen verrückt ...

    @media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}

@media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}

@media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}

    InformationsquelleAutor der Antwort Christian Schröter

  3. 0

    Wenn Sie wollen 25% Breite nicht 24.9% hinzufügen margin-left:-1px!important; zu Ihrer box

    InformationsquelleAutor der Antwort Paul Kowalik

Schreibe einen Kommentar