WPF ning WrapPanel (Webdesign) ga o'xshash gorizontal tartibini yaratish

Men axborotni vertikal ravishda emas, balki horizontallli tarzda taqdim etishni istayman. Kimdir sahifani ochsa, ular bir nechta maqolalarni ko'rishlari va pastga siljish o'rniga maqola ro'yxati chapga yoki o'ngga o'tishi kerak. Bu siz planshetlarda juda yaxshi ko'rinishi kerak, chunki u sizning rasmingizni silkitib borayotganidek tuyg'usini beradi, shuningdek, Windows 8 da ko'ringan yangiliklar o'qiydigan dasturning hissi bor (masalan: http://blog.jasedigitalmedia.com/wp-content /uploads/2011/10/Windows-8-Metro-News-Reader-550x413.png )

Mening yangilik maqolalarimda kenglik bor, lekin balandlik postning uzunligiga qarab farq qilishi mumkin. Men ularning ota-bobining oxiriga yetib kelishganida, ular o'ng tomonga o'ralib, u erdan davom ettirishni istasam, bu juda ko'p harakatlar bilan wpf WrapPanel va uning orientatsiya majmui bilan vertikalgacha.

Hozir menda (qutilarda chegara ko'rishni osonlashtiradigan ko'k fon bor)

Joriy versiya http://img546.imageshack.us/img546/6629/27149541.png

Bu men istagan narsam (fotoshopning yuqoridagi rasmga asoslangan mock-up):

Kelajakdagi versiya http://img522.imageshack.us/img522/4974/41526451.png

Tushuntirish va narsalarni tozalash uchun, mening kodim bu

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>

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

Displeyni ishlatishga harakat qildim: inline-block, lekin u ham ishlamadi. Juda oson ko'rinadi, lekin buni amalga oshirishning bir yo'li topilmaydi. Ba'zi yordamlar juda qadrlanadi.

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 javoblar

CSS-ni o'zgartiring,

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

Ko'rsatilgan qo'shimcha intervalni tozalash uchun bu hiyla-nayrangni amalga oshirish kerak: inline-block, keyin html tilidagi har bir pochta markasi orasidagi bo'shliqni yo'q qilish.

0
qo'shib qo'ydi
Portret-hizalamakni qo'shib ko'ring: o'rta va inline-blok o'rniga, jadval-hujayra ishlashi mumkin.
qo'shib qo'ydi muallif cgweb87, manba
Keyin har bir narsa vertikal ravishda hizalanadi, HTMLga qo'shimcha qo'shishga harakat qiling va uni ko'rasiz.
qo'shib qo'ydi muallif Nick, manba

CSS3 xususiyatlaridan foydalanib siz ustunlar ( http://www.quirksmode.org/css/multicolumn.html) dan foydalanishingiz mumkin. ) va ularni har blokirovka qilish uchun column-break-inside: oldini olish dan foydalaning. (Siz CSS-ning bu xususiyatlari uchun maxsus brauzer kerakligini aniqlaydi). Biroq, bu eski brauzerlarda ishlamaydi.

0
qo'shib qo'ydi
caniuse.com saytidan oqilona yordamni qo'llab-quvvatlash ro'yxatini tekshirib ko'ring
qo'shib qo'ydi muallif Kamran Shahid, manba
IE9da ishlamaydi;
qo'shib qo'ydi muallif Nick, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb