无法在相邻的顶部Div下面设置底部Div

时间:2016-09-20 19:18:35

标签: html css html5

Image of Issues

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
}
<!--top Div-->
<div style="width: 100%; height:100%;background-color: orange">
  <div style="width: 80%; height:20%;color: navy; background-color: yellow; solid blue;text-align:right;align:center;margin: 0 auto;">
    <div style="width: 20%; height:80%;color: navy; background-color: pink; border: 1px  black; padding: 5px;float:right">
      <h2> <p style="text-align:right;">Enter Site Title</p> </h2>
      <h1> <p style="text-align:right;">Enter Site Slogen</p> </h1>
    </div>
  </div>
  <!-- top Div Close -->

  <div style="width: 80%; height:80%;color: navy; background-color: pink;  solid blue;text-align:right;align:center;margin: 0 auto">
    <div style="width: 100%; height:85%;background-color: green;position: relative;">
      <div style="width: 30%; height:100%;color: navy; background-color: blue;  solid blue;text-align:right;align:left;float: left">
        <h1 style="text-align:right;" style="margin-right: 20px">Enter Site Title</h1>
        <h2 style="text-align:right">Enter Site Slogen</h2>
      </div>
      <div style="width: 65%; height:100%;color: navy; background-color: cyan;  solid blue;text-align:right;align:left;float: right;">
        <h1 style="text-align:right;margin-right: 20px;">Enter Site Title</h1>
        <h2 style="text-align:right">Enter Site Slogen</h2>
      </div>
    </div>
    <div style="width:100%;height:15%;background-color: red;position: top;clear: both">
      <p style="text-align:right;font-size:15px;">Enter Site Title</p>
    </div>
  </div>
</div>

你可以看到红色Div从父div中获得很少,而蓝色Div和Red Div之间的空间也很小。

1 个答案:

答案 0 :(得分:1)

你正试图制作一个页脚 将页脚抓取到底部。
不要输入内联CSS,而是编写一个CSS文件并通过编写以下方式在HTML页面中调用它:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<head>部分。

在HTML div中,写一下:

<div id="footer"> Footer text here </div>

在CSS文件中,写一下:

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

它应该留在底部。 :)