Стварэнне гарызантальнай кампаноўкі, падобны WrapPanel WPF (у Вебдизайн)

Я хачу, каб прадстаўляць навіны на навінавым сайце horizontallly, а не вертыкальна. Калі хтосьці адкрывае старонку, яны павінны ўбачыць некалькі артыкулаў, і замест пракруткі ўніз, спіс артыкулаў, варта пракруціць налева або направа. Гэта павінна выглядаць даволі крута на таблеткі, паколькі гэта дае вам адчуванне, як быццам вы прагортцы карыта фатаграфіі, ён таксама мае пачуццё прыкладанне чытання навін, які бачыў у Windows 8. (напрыклад: http://blog.jasedigitalmedia.com/wp-content /uploads/2011/10/Windows-8-Metro-News-Reader-550x413.png )

Мае навіны артыкула мае мноства шырыню, але вышыня можа вар'іравацца ў залежнасці ад даўжыні паста. Я хачу, каб выраўнаваць ўніз, калі яны дасягаюць канца свайго бацькоўскага DIV, яны павінны абгарнуць направа і працягнуць адтуль, гэта вельмі такое ж паводзіны, як wpf WrapPanel з яго арыентацыяй набор да вертыкалі.

Гэта тое, што я цяпер (скрынкі маюць сіні фон, каб зрабіць яго лягчэй ўбачыць мяжы)

Бягучая версія http://img546.imageshack.us/img546/6629/27149541.png </а>

Гэта тое, што я хачу (Photoshop макет на аснове на малюнку):

Future Version 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; 
    }

Я спрабаваў выкарыстаць дысплей: убудаваны блок, але ён не працуе. Выглядае даволі проста, але я не магу знайсці спосаб зрабіць гэта. Некаторая дапамогу будзе высока ацэнены.

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

Гэта павінна зрабіць трук, каб ачысціць дадатковы расстаўленыя выклікана дысплей: убудаваны блок, то пераканайцеся, што прабелы паміж кожным .post ў вашым HTML ўстараняецца.

0
дададзена
Паспрабуйце дадаць вертыкальнае выраўноўванне: сярэдні, і замест таго, каб ўбудаваны блок, змяніць яго на стол-клеткі могуць працаваць.
дададзена аўтар cgweb87, крыніца
Тады ўсё становіцца выраўнаваны па вертыкалі, паспрабуйце дадаць у HTML больш .post «ы, і вы ўбачыце яго.
дададзена аўтар Nick, крыніца

Выкарыстанне функцый CSS3 вы можаце выкарыстоўваць слупкі ( http://www.quirksmode.org/css/multicolumn.html ) і выкарыстаць калонкі-распад ўнутры: пазбегнуць; для кожнага элемента, каб трымаць іх у блоках. (Вы будзеце мець патрэбу ў браўзэры канкрэтныя вызначае для гэтых уласцівасцяў CSS.) Тым не менш, гэта не будзе працаваць у старых браўзэрах.

0
дададзена
праверце спіс функцый падтрымкі браўзэра мудры ў caniuse.com
дададзена аўтар Kamran Shahid, крыніца
Не працуе ў IE9; (
дададзена аўтар Nick, крыніца