Question

我正在创建一个网站，但有一点问题，我不知道如何解决。

 <div id="middle">
        <div id="clock">Here shows JS clock</div><br>       
        <div class="element">
            <img  height="80px" src="SOURCE"/><h1 style="float:left" >TITLE TEXT</h1><div class="clearboth"></div>
             TITLE TEXT
        </div>
        <div class="clearboth"></div>
        <div class="element">
            <img  height="80px" src="SOURCE"/><h1 style="float:left">TITLE TEXT</h1><div class="clearboth"></div>
            <p>SOME TEXT</p>
        </div>

和CSS

    .element{
        background-color:#fff;
        min-heigth:100px;
    }
    #middle{
        font-family:'Roboto', monospace;
        padding-left:5px;
        padding-right:5px;
        min-height:1000px;
        width:1000px;
        background-color:#ffffff;
        margin:auto;
    }
    #middle > h1,h2,h3{
        font-family: 'VT323', monospace;
        font-size:34px;
        margin-left:20px;
    }
.clearboth{
    clear:both;
}

    #middle  p{
        text-indent: 40px;
        font-size:18px;
    }

但它的最小高度不起作用 - 下一个元素在前一个元素之后开始。

Answer 1

据我所知，物品的高度似乎没有变化（即百分比等）。这意味着高度保持静止，因此在某种意义上没有理由激活最小高度。尝试这样做并修复其他人指出的其他错误。希望这会有所帮助。

Answer 2

在我看来，你想要的是在你的元素之间留出空间，假设你写的代码得到纠正（＆＃34;身高＆＃34;而不是＆＃34; heigth＆＃34;和div＃中间已关闭），尝试在底部添加一些边距。

.element {
    background-color: #fff;
    min-height: 100px;
    margin-bottom: 30px; /* Add this line to separate each element for 30px */
}

如果您不需要最后一个元素的边距，只需添加一个新的选择器来定位代码中的最后一个.element。

.element:last-of-type {
    margin-botton: 0;
}

Answer 3

试试这个，min-height拼写错误，你的#middle div没有关闭。

    .element{
        background-color:#fff;
        min-height:100px;
    }
    #middle{
        font-family:'Roboto', monospace;
        padding-left:5px;
        padding-right:5px;
        min-height:1000px;
        width:1000px;
        background-color:#ffffff;
        margin:auto;
    }
    #middle > h1,h2,h3{
        font-family: 'VT323', monospace;
        font-size:34px;
        margin-left:20px;
    }
.clearboth{
    clear:both;
}

    #middle  p{
        text-indent: 40px;
        font-size:18px;
    }

<div id="middle">
    <div id="clock">Here shows JS clock</div><br>       
    <div class="element">
        <img  height="80px" src="SOURCE"/><h1 style="float:left" >TITLE TEXT</h1><div class="clearboth"></div>
         TITLE TEXT
    </div>
    <div class="clearboth"></div>
    <div class="element">
        <img  height="80px" src="SOURCE"/><h1 style="float:left">TITLE TEXT</h1><div class="clearboth"></div>
        <p>SOME TEXT</p>
    </div>
</div>

上课的最小高度不起作用

3 个答案: