0

完全な div 要素を使用して最初のレイアウトを作成していますが、問題が発生しました。固定位置の div と自動高さ (コンテンツに基づいて拡張されます) がありますが、その下に別の div を配置できないようです。上のdivの高さに応じて、下のdivを自動的に配置するにはどうすればよいですか?

これらの div は、画面の中央に配置するラッパー div 内に含まれます。

JSFIDDLE: http://jsfiddle.net/kfbjd/ (最初の div には上の値があるため、下の div がそれをオーバーライドすることに注意してください)

<div id="main">
<div id="maintext">MAIN</div>

</div>

<div id="about">
<div id="maintext">ABOUT</div>

</div>

<style type="text/css">
#main{
    background-color:#000;
    width:900px;
    top:129px;
    position:fixed;
}

#about{
    background-color:#000;
    width:900px;
    position:relative;
}
</style>

#about に top:129px を追加して修正していただきありがとうございます。ただし、ブラウザの jsfiddle では正しく表示されますが、テキストが折り返されて表示されるという問題があります。

ここに画像の説明を入力

4

3 に答える 3

2

編集: これは、jsfiddle を使用したものです: http://jsfiddle.net/kfbjd/7/

他の誰かがコメントしたように、固定位置または絶対位置はページの流れから削除されるため、他の div をその周りに配置することはできません。相対位置を設定してから css の「display: block」スタイルを使用すると、探しているものに近づく可能性があります。

http://www.w3schools.com/cssref/pr_class_display.asp

後世のために、水平方向のセンタリングを含む、JSFiddle からのソリューションの全文を含むように更新します。

<style>
#main{
    background-color:#000;
    width:900px;
    margin-top:149px;
    position:relative;
    margin-left: auto;
    margin-right: auto;    
    opacity:0.9;
    z-index:2;
    box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;    
}

.maintext{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#6b6b6b;
    padding:25px;
    text-align:left;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;    
}

#about{
    background-color:#000;
    width:900px;
    /*height:450px;    */
    margin-top:20px;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    opacity:0.9;
    z-index:2;
    box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;    
}
</style>

<div id="main">
<div class="maintext">Welcome to my personal portfolio. Here you can find projects I have worked on, and hire me for freelance work. If you like my work and want to hire me for projects please check out my software skills <a href="about.html">here</a> and <a href="contact.html">contact</a> me to discuss about projects.Welcome to my personal portfolio.
<div style="text-align:center;"><br/><img src="images/green.png" border="0" style="vertical-align:middle; margin-bottom:3px;"/>Available for freelance work</div></div>

</div>

<div id="about">
<div class="maintext">ABOUT TEXT</div>
​
于 2012-11-19T20:10:26.853 に答える
1

#main 内で #about を移動すると、http://jsfiddle.net/kfbjd/3/ が正しく配置されます

それができない場合は、追加するだけです

top:129px;

#about div に (すでに #main に与えたものと一致します)。http://jsfiddle.net/kfbjd/5/

于 2012-11-19T20:24:21.547 に答える
0

「about」divを固定位置の「main」divの一番下に配置したいだけで、「about」divの高さがわかっている場合は、次のようにすることができます。

<style>
    #main{
    background-color:#000;
    width:900px;
    top:129px;
    position:fixed;
    padding:0px 0px 100px 0px;
}

#about{
    background-color:#ff0000;
    width:900px;
    position:absolute;
    bottom:0px;
height:100px;
}
</style>

<div id="main">
    <div id="maintext">MAIN</div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="about">
    <div id="maintext">ABOUT</div>

    </div>

</div>

「メイン」の下部のパディングにより、「約」div のスペースが下部に表示されます (そうしないと、「メイン」div の下部にあるものと重なってしまいます)。「about」divの高さの例として100ピクセルを入れました。

于 2012-11-19T20:43:18.460 に答える