Een horizontale lay-out creëren vergelijkbaar met WrapF's WrapPanel (Webdesign)

Ik wil nieuws voor een nieuwssite horizontaal weergeven in plaats van verticaal. Wanneer iemand de pagina opent, moeten ze verschillende artikelen zien en in plaats van naar beneden te scrollen, zou de lijst met artikelen naar links of rechts moeten schuiven. Dit zou best cool op tablets moeten lijken, omdat het je het gevoel geeft alsof je door foto's bladert, het heeft ook het gevoel van de nieuwslezer-app die te zien is in Windows 8. (bijv .: http://blog.jasedigitalmedia.com/wp-content /uploads/2011/10/Windows-8-Metro-News-Reader-550x413.png )

Mijn nieuwsartikelen hebben een ingestelde breedte, maar de hoogte kan variëren afhankelijk van de lengte van de post. Ik wil dat ze worden uitgelijnd, wanneer ze het einde van hun bovenliggende div bereiken, moeten ze naar rechts insluiten en van daar verder gaan, dit is vrijwel hetzelfde gedrag als het wpf WrapPanel met de bijbehorende oriëntatie naar verticaal.

Dit is wat ik nu heb (de vakken hebben een blauwe achtergrond om het gemakkelijker te maken om de grenzen te zien)

Huidige versie http://img546.imageshack.us/img546/6629/27149541.png

Dit is wat ik zou willen (Photoshop-mock-up op basis van bovenstaande afbeelding):

Toekomstige versie http://img522.imageshack.us/img522/4974/41526451.png

Om samen te vatten en op te ruimen, hier is mijn code

My HTML Layout & Code

  • div#wrap: takes the complete width of my browser window
  • div#newswrap: inside #wrap, very large width to host my news items, horizontal scroll bar
  • div.post: a single post, with fixed width

    <div id="wrap">
    <div id="newswrap">
       <div class="post">
        <div class="title">Lorem Ipsum Dolor</div>
        <div class="postcontent">
    Lorem ipsum *text text*

    </div> </div> <div class="post"> <div class="title">Lorem Ipsum Dolor</div> <div class="postcontent">
    Lorem ipsum *text text*

    </div> </div> </div> </div>

En CSS:

    #wrap
    {
    width:100%;
    height:500px;
    background-color: rgba(0,0,0,0.5);
    overflow:scroll;
    overflow-y:hidden;
    }

    #newswrap
    {
    width:2500px;
    height:500px;
    }


    .post
    {
    width: 300px;
    float: left;
    /* display:inline-block; */
    background: rgba(0,0,120,0.5);
    padding: 10px;
    margin: 30px 0px 30px 30px; 
    }

Ik heb geprobeerd om display: inline-block te gebruiken, maar het werkte ook niet. Ziet er vrij eenvoudig uit, maar ik kan er geen manier voor vinden om het te doen. Sommige hulp zou zeer gewaardeerd worden.

Additional Question Can I capture the scroll event with jQuery/JS so the newswrap scrolls when I scroll down? I tried using the $("#").mousewheel function but it didn't seem to scroll (though it did trigger the event when tested with an alert)

3

2 antwoord

Verander je CSS naar dit,

    #wrap
{
width:100%;
height:500px;
background-color: rgba(0,0,0,0.5);
overflow:scroll;
overflow-y:hidden;
}

#newswrap
{
width:2500px;
height:500px;
text-align: center;
}


.post
{
width: 300px;
/* display:inline-block; */
background: rgba(0,0,120,0.5);
padding: 10px;
margin: 30px 0px 30px 30px; 
}

Dit zou de truc moeten doen, om de extra gespatieerde door display te wissen: inline-block, en zorg er dan voor dat de spatie tussen elke .post in je html geëlimineerd is.

0
toegevoegd
Probeer vertical-align: middle en in plaats van inline-block toe te voegen, wijzig het in tabel-cel.
toegevoegd de auteur cgweb87, de bron
Vervolgens wordt alles verticaal uitgelijnd, probeer meer .post 's toe te voegen aan de HTML en je zult het zien.
toegevoegd de auteur Nick, de bron

Met CSS3-functies kunt u kolommen gebruiken ( http://www.quirksmode.org/css/multicolumn.html ) en gebruik column-break-inside: avoid; voor elk element om ze in blokken te houden. (Je hebt de browserspecifieke definities voor deze CSS-eigenschappen nodig.) Dit werkt echter niet in oudere browsers.

0
toegevoegd
controleer de ondersteuningslijst van de browser browser op caniuse.com
toegevoegd de auteur Kamran Shahid, de bron
Werkt niet in IE9;
toegevoegd de auteur Nick, de bron