1

我正在尝试为网站制作一个模块。该模块将包括标题、文本和图像。我希望网站管理员能够在页面中插入任意数量的这些模块，理想情况下，他应该能够在模块中输入任意数量的内容，并让它自动调整到适当的高度。

这是问题所在：

我似乎无法将名为“myModlue”（包含标题、图像和文本的红色框）的整个模块的高度设置为自动高度，并且在没有两个 div 的情况下将“moduleBody”设置为自动高度矛盾的。为了让“mymodule”识别里面的内容以便自动调整高度，我需要将定位设置为绝对。此时“mymodule”包含应有的所有内容，但“moduleBody”不是....moduleBody 已折叠并且不会承认里面的元素，除非我也将它的位置设置为绝对。当我这样做时，“moduleBody”确实调整了高度，但现在“myModule”不再在高度中包含“moduleBody”，它只看到“moduleHeader”（未设置为位置：绝对；

仅供参考：样式都直接嵌入到 html 中，我的完整版本绝对不会是这样的，我这样做只是因为我想在测试时快速查看事情的外观。奇怪的颜色也用于测试目的。

感谢任何提供帮助的人，林赛 :)

我的模块.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;给您带来麻烦的两个 div。这是包含浮动元素的元素的一个问题 - 它们会自行折叠，因为它们的内容已从正常的内容流中删除（即，它们无法告诉它们应该有多高）。

于 2013-03-11T22:59:44.550 回答
1

您看到的行为是由于元素被浮动造成的，这意味着它们已从正常流程中删除，并且在计算包含元素的高度时不会被浏览器使用。那里有很多关于 CSS 的博客文章float，所以我只链接一个作为背景阅读。

有很多方法可以解决这个问题，例如在 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%因为这些是您应用它们的元素的默认值。

另一种方法是删除“clear fix”类float:left并使用display:inline-blockandvertical-align:top;代替，就像在这个替代演示中一样。

于 2013-03-11T23:20:05.437 回答