0

私は HTML5 の初心者です。現在、最初の記事で 2 つの段落を作成しようとしています。http://f6design.com/projects/parallax-scrolling/のスニペットをいくつか使用しました。単純に、イントロ記事で 2 つの段落を達成したいだけです。この代替案を試しましたが、失敗しました。

    <div class="side-container">
        <!-- left side -->
        <aside>
        Left: Fixed width, 100% height of the window or right hand content
        </aside>

        <!-- main content -->
        <article>
        Right: Fluid width                       
        </article>
    </div>

http://jsfiddle.net/t3AxY/7/

ここに私のコードが ありますhttp://jsfiddle.net/sw8s4/
これを行う方法について何か提案はありますか?

ベスト、
セバスチャン

4

1 に答える 1

1

私はこのようなことを試してみます:

#content {
    z-index: 4;
    position: relative;
    max-width: 900px;
    padding: 0 10px;
    margin: 0 auto;
    line-height: 1.7;
}
#intro {
    float:left;
    width: 400px;
    padding-right:40px;
}
#manned-flight {
    width: 100%;
}
article img {
    height:30px;
    width:100%;
}

出力がどのように表示されるかは正確にはわかりませんが、この方法では 2 つの列が得られます。最初のものは固定幅を取得し、2番目のものはサイズを変更して親の残りを埋めます。

あなたのjsfiddleを更新してください

height:100%;を付けてbody、ウィンドウの高さの 100% にする#contentこともできます。#intro

于 2013-05-03T07:58:43.977 に答える