WPFのWrapPanel(Webdesign)に似た水平レイアウトを作成する

私は垂直にではなく、ニュースのウェブサイトのニュースを水平方向に表現したい。誰かがページを開くと、いくつかの記事が表示され、スクロールする代わりに、記事のリストが左右にスクロールする必要があります。これは、あなたがトラフの写真をスクロールしているかのように感情を与えるので、タブレットでは非常に涼しく見えます。また、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モックアップ):

次のバージョン: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; 
    }

display: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の各.postの間の空白が削除されることを確認してください。

0
追加された
vertical-align:middleを追加して、インラインブロックの代わりにtable-cellに変更してみてください。
追加された 著者 cgweb87,
その後、すべてが垂直に整列され、HTMLに.postを追加すると、それが表示されます。
追加された 著者 Nick,

CSS3機能を使用すると、列を使用できます( http://www.quirksmode.org/css/multicolumn.html )を使用し、各要素をブロック内に保持するために column-break-inside:avoid; を使用します。 (これらのCSSプロパティには、ブラウザ固有の定義が必要です。)しかし、これは古いブラウザでは機能しません。

0
追加された
caniuse.comで機能サポートリストブラウザを賢明にチェックしてください
追加された 著者 Kamran Shahid,
IE9では動作しません;(
追加された 著者 Nick,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript