WPF-дің WrapPanel (Webdesign) сияқты көлденең орналасуын жасау

Жаңалықтарды веб-сайтқа тігінен емес, көлденеңінен ұсынғым келеді. Біреу бетті ашады, олар бірнеше мақаланы көруі керек және төмен қарай жылжудың орнына мақалалар тізімі солға немесе оңға қарай жылжуға тиіс. Бұл планшеттерде өте әдемі көрінуі керек, себебі бұл сізді көлденең суреттерге айналдыру секілді сезінуге мүмкіндік береді, сонымен қатар Windows 8-де көрген жаңалықтар оқырмандары қосымшасының сезімі бар (мысалы: http://blog.jasedigitalmedia.com/wp-content /uploads/2011/10/Windows-8-Metro-News-Reader-550x413.png )

Менің жаңалықтар мақалаларым ені бар, бірақ биіктігі посттың ұзындығына байланысты өзгеруі мүмкін. Мен олардың ата-анасының дүниесінің соңына жеткенде, олар оң жаққа орап, сол жерден жалғастыру керек болғанда, олармен бірге орналасуын қалаймын, бұл өз ориентациясы бар wpf WrapPanel тікке.

Міне, енді менде (қораптардың шекараны көруге жеңілдік беретін көк фоны бар)

Ағымдағы нұсқасы http://img546.imageshack.us/img546/6629/27149541.png

Мен қалаған нәрсе (Photoshop-ті жоғарыда келтірілген сурет негізінде):

Болашақ нұсқасы http://img522.imageshack.us/img522/4974/41526451.png

Іс-әрекеттер туралы еске салу және тазалау үшін, менің кодым

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>

Және 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; 
    }

Дисплейді қолдануға тырыстым: inline-block, бірақ ол да жұмыс істемеді. Қарапайым көрінеді, бірақ мен мұны істеуге мүмкіндік таба алмаймын. Кейбір көмектер өте жоғары бағаланады.

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 жауаптар

Осыған CSS-ді өзгертіңіз,

    #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; 
}

Бұл дисплейден туындаған қосымша аралықты тазарту үшін жасырын жасауы керек: inline-block, содан кейін html-дағы әрбір посттың арасындағы бос орынның жойылғанына көз жеткізіңіз.

0
қосылды
Тік тік туралауды қосып көріңіз: ортаңғы және кірістірілген блоктың орнына оны кесте ұяшығына өзгертіңіз.
қосылды автор cgweb87, көзі
Содан кейін бәрі тігінен теңестіріледі, HTML-ге көбірек қосып көріңіз және оны көресіз.
қосылды автор Nick, көзі

CSS3 мүмкіндіктерін пайдалану арқылы бағандарды пайдалануға болады ( http://www.quirksmode.org/css/multicolumn.html ) және оларды әрбір блокта сақтау үшін column-break-inside: avoid; қолданыңыз. (Бұл CSS сипаттары үшін арнайы браузер қажет болады.) Алайда бұл ескі браузерлерде жұмыс істемейді.

0
қосылды
caniuse.com сайтында ақылға қонымды қолдау көрсету тізімін шолғышты тексеріңіз
қосылды автор Kamran Shahid, көзі
IE9-да жұмыс істемейді;
қосылды автор Nick, көзі