0

私は現在、新しい Web アプリケーションのスケルトン レイアウトに取り組んでいますが、特に CSS レイアウトと DIV でいくつかの問題に遭遇しました。

1) ボックス 1 および 2 (1 列目) は 3 (2 列目) および 4 (3 列目) と一致しません。どうすればこれをまっすぐにできますか？

2)特定のサイズに最小化されると自動的にサイズが変更され、ウィンドウが最大化されると拡大されるインターフェイスが本当に気に入っています。これをレイアウトに実装しようとしましたが、できません。フッターが「はみ出す」のが残念。すべてを 1 ページに収めたいと思います。上記のWebサイトのように、これを達成するにはどうすればよいですか?

よろしくお願いします。

HTML:

<!--  
============================================
LOGO
============================================
-->

<div id="wrapper">
    <div class="logo">logo</div>

<!--   
============================================
NAVBAR
============================================
-->   

<div id="header">
    <a href="#">link 1</a>
    &nbsp;|&nbsp;
    <a href="#">link 2</a>
    &nbsp;|&nbsp;
    <a href="#">link 3</a>
    &nbsp;|&nbsp;
    <a href="#">link 4</a>
</div>

  <div style="clear: both;"></div>

<!--  
============================================
NAVIGATION & CONTACTS
============================================
-->

<div class="column" id="first-column">
    <div class="window" id="window-1">1</div>
    <div class="window" id="window-2">2</div>
</div>

<!--   
============================================
MAIN CONTENT
============================================
-->

<div class="column" id="second-column">
    <div class="window" id="window-3">3</div>
</div>

<!--
============================================
CHAT
============================================
-->

<div class="column" id="third-column">
    <div class="window" id="window-4">4</div>
</div>

<!--  
============================================
FOOTER
============================================
-->

        <div style="clear: both;"></div>
        <div class="footer">footer</div>
</div>​

CSS:

/*
============================================
GENERAL
============================================
*/

body, html{
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    height: 100%;
}

/*
============================================
LAYOUT SKELETON
============================================
*/

#wrapper {
    margin: 0 auto;
    max-width: 1212px;
    min-height: 540px;
    min-width: 784px;
    position: relative;
    height: 100%;
}

#header{
    text-align:right;
    padding:5px;
    font-size:10px;
    padding-right: 30px;
}

#first-column{
    width: 20%;
    padding-left: 5px;
    height: 100%;
}

#second-column{
    width: 50%;
    height: 100%;
}

#third-column{
    width: 25%;
}

.window{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #CECECE;
    width:100%;
}

#window-1{
    height:50%;
}

#window-2{
    margin-top:10px;
    height:50%;
}

#window-3{
    height: 100%;
}

#window-4{
    height:100%;
}

.column{
    float:left;
    margin: 5px;
    height: 100%;
}

.logo {
    font-family: arial;
    font-size: 12px;
    float: left;
    padding-left: 10px;
}

.footer {
    margin-top: 10px;
    padding-left: 10px;
}

</p>

4

1 に答える 1

1

1) 列 1 に高さ 50% の 2 つの div があるため、2 セットの余白があります。列 2 に 1 つの div があるため、マージンは 1 セットだけなので、使用するマージンだけ列 1 が長くなります。それを修正するために提供できる最善の方法は、下部に 10px のパディングを追加することです。これにより、最初の列のマージンに追いつくはずです。

2) 最小幅と最大幅を追加し、幅を % に設定します。最小 100px、最大 300px、幅 50% とします。画面の幅が 200px から 600px の場合は 50% になり、それ以外の場合は指定された制限になります。

于 2012-07-25T13:34:20.900 に答える