Question

我正在尝试为网站制作模块。该模块将包括标题，文本和图像。我希望网站管理员能够将他喜欢的这些模块尽可能多地插入到页面中，理想情况下，他应该能够在模块中输入他想要的内容并自动调整到适当的高度。

问题在于：

我似乎无法将整个模块的高度称为“myModlue”（包含标题，图像和文本的红色框）为自动高度，并且还将“moduleBody”设置为自动高度两个div相互冲突。为了让“mymodule”识别内部的内容以便自动调整高度，我需要将定位设置为绝对。此时“mymodule”包含它应该的所有内容，但“moduleBody”不是.... moduleBody已折叠，并且不会确认内部元素，除非我将其位置设置为绝对。当我执行此操作时“moduleBody”确实调整了高度，但现在“myModule”不再包含“moduleBody”的高度，它只看到“moduleHeader”（未设置为position：absolute;）如何同时“ myModule“和”moduleBody“自动高度，一切正常吗？

仅供参考：这些样式都直接嵌入到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>

Answer 1

你需要在两个div上设置overflow: auto;给你带来麻烦。这是包含浮动元素的元素的问题 - 它们自身崩溃，因为它们的内容已从正常内容流中移除（即，它们没有任何东西可以告诉它们应该有多高）。

Answer 2

您看到的行为是由于元素被浮动，这意味着它们已从正常流中移除，并且在计算包含元素的高度时浏览器将不。有很多关于CSS float的博客文章，所以我只会链接一个background reading。

有很多方法可以解决此问题，例如在quirksmode博客上Clearing floats。最着名的被称为“明确修复”，其中一个例子可以找到here，也可以在下面找到：

/**
 * 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;
}

所以适用于this demo或以下@

中的（已清理的） 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%，因为这些是您应用它们的元素的默认值。

另一种方法是删除“明确修复”类和float:left并使用display:inline-block和vertical-align:top;，而不是this alternate demo。

height：使用不同的定位时，auto属性会搞乱

myModule.html

2 个答案: