1

ウェブサイト用のモジュールを作成しようとしています。このモジュールには、見出し、テキスト、および画像が含まれます。ウェブマスターがこれらのモジュールを好きなだけページに挿入できるようにしたいのですが、理想的には、モジュールに好きなだけ入力して、適切な高さに自動調整できるようにする必要があります。

ここに問題があります：

「myModlue」（見出し、画像、テキストを保持する赤いボックス）と呼ばれるモジュール全体の高さを自動高さにすることができず、「moduleBody」を2つのdivなしで自動高さに設定することもできません。競合しています。「mymodule」に内部のコンテンツを認識させて高さを自動調整するには、位置を絶対に設定する必要があります。この時点で、「mymodule」には必要なものがすべて含まれていますが、「moduleBody」は含まれていません。moduleBodyは折りたたまれており、絶対位置も設定しない限り、内部の要素を認識しません。これを行うと、「moduleBody」の高さは調整されますが、「myModule」の高さには「moduleBody」が含まれなくなり、「moduleHeader」（position：absoluteに設定されていません）のみが表示されます。

参考までに：スタイルはすべてhtmlに直接埋め込まれています。私の完全なバージョンは絶対にこのようには見えません。テスト中に物事がどのようにすばやく見えるかを確認したいので、これを行っただけです。奇妙な色はテスト目的でもあります。

助けてくれた人に感謝します、リンゼイ:)

myModule.html

<div id= "myModule"style="height:auto; width: 1000px;  position:absolute; background-color:red;" >

        <div id= "moduleHeader" style = "width:100%; height:auto; background-color:yellow; ">
            <p style="text-align:left; font-family:Arial; font-size:22px; font-size:30px; color:#191970; margin-left:20px;">Who We Are 
            <span><b style="color:#999; font-size:20px;">Learn more about Trinity</b></span></p>
        </div>

        <div id= "moduleBody" style="background-color:#0E1031; width:800px; height:auto; margin-left:auto; margin-right:auto; padding:40px;border:thick solid #1B1851;  border-radius: 15px; position:absolute;">
            <p style=" text-align:justify; height:150px; width:500px;   font-family:Arial; font-size:14px; line-height:150%; float:left; color:white; ">
            The United Church of Christ acknowledges as its sole head, Jesus Christ, Son of God and Savior. 
            It acknowledges as kindred in Christ all who share in this confession. It looks to the Word of 
            God in the Scriptures, and to the presence and power of the Holy Spirit, to prosper its creative 
            and redemptive work in the world. It claims as its own the faith of the historic Church expressed 
            in the ancient creeds and reclaimed in the basic insights of the Protestant Reformers. It affirms 
            the responsibility of the Church in each generation to make this faith its own in reality of worship, 
            in honesty of thought and expression, and in purity of heart before God. In accordance with the teaching 
            of our Lord and the practice prevailing among evangelical Christians, it recognizes two sacraments: 
            Baptism and the Lords Supper or Holy Communion.
            </p>        
            <div id="mod_Image" style="height:250px; width:200px;margin-left:40px; float:left; border:thick solid white;"><img src="churchImg.jpg" style="height:100%; width:100%; "/></div>
        </div>
 </div>
4

2 に答える 2

2

overflow: auto;問題を引き起こす2つのdivを設定する必要があります。これは、float 要素を含む要素の問題です。コンテンツが通常のコンテンツ フローから削除されているため、要素自体が折りたたまれます (つまり、高さを指定するものが何もありません)。

于 2013-03-11T22:59:44.550 に答える
1

表示されている動作は、要素がフローティングされているためです。つまり、要素が通常のフローから削除されており、含まれている要素の高さを計算するときにブラウザーで使用されません。CSS に関するブログ記事はたくさんありfloatますので、参考文献として 1 つだけリンクします。

これを修正する方法はたくさんあります。たとえば、quirksmode のブログ - Clearing floats . 最も有名なのは「明確な修正」として知られています。その例は、ここと以下にあります。

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

したがって、このデモまたは以下に示すように、(クリーンアップされた) HTMLに適用します@

<div id= "myModule">
    <div id="moduleHeader">
        <p>Who We Are <span><b style="color:#999; font-size:20px;">Learn more about Trinity</b></span></p>
    </div>
    <div id= "moduleBody" class="cf">
        <p>The United Church of Christ acknowledges as its sole head, Jesus Christ, Son of God and Savior. It acknowledges as kindred in Christ all who share in this confession. It looks to the Word of God in the Scriptures, and to the presence and power of the Holy Spirit, to prosper its creative and redemptive work in the world. It claims as its own the faith of the historic Church expressed in the ancient creeds and reclaimed in the basic insights of the Protestant Reformers. It affirms the responsibility of the Church in each generation to make this faith its own in reality of worship, in honesty of thought and expression, and in purity of heart before God. In accordance with the teaching of our Lord and the practice prevailing among evangelical Christians, it recognizes two sacraments: Baptism and the Lords Supper or Holy Communion.</p>
        <div id="mod_Image"><img src="churchImg.jpg"/></div>
    </div>
 </div>

CSS

#myModule {
    width:1000px;
    background-color:red;
}

#moduleHeader {
    background-color:yellow;
}

#moduleHeader p {
    text-align:left;
    font-family:Arial;
    font-size:22px;
    font-size:30px;
    color:#191970;
    margin-left:20px;
}

#moduleBody {
    background-color:#0E1031;
    width:800px;
    padding:40px;border:thick solid #1B1851; 
    border-radius: 15px;
}

#moduleBody p {
    text-align:justify;
    height:150px;
    width:500px;
    font-family:Arial;
    font-size:14px;
    line-height:150%;
    float:left;
    color:white; 
}

#mod_Image {
    height:250px;
    width:200px;
    margin-left:40px;
    float:left;
    border:thick solid white;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

height:auto、のいずれかを指定する必要がないことに注意してください。これらはposition:absolute、width:100%それらを適用した要素のデフォルトであるためです。

別のアプローチは、この代替デモのように、「明確な修正」クラス and を削除し、代わりにfloat:leftand を使用することです。display:inline-blockvertical-align:top;

于 2013-03-11T23:20:05.437 に答える