简单的HTML / CSS - 定位div

Question

我最近进入了HTML / CSS世界，我正在努力解决问题。

我想将div定位如下：

但我只能这样做：

如你所见，我希望div 5低于Div 4，并且在div 3旁边。但我只是

当然，我可以将div 4和div 5包装在一个新的div中，但我宁愿学习更好的方法。

＆＃13;

＆＃13;

body {
  background-color: yellow;
}
#banner {
  background-color: green;
}
#topp-meny {
  background-color: pink;
}
#side-meny {
  background-color: violet;
  float: left;
}
#innhold {
  background-color: grey;
  float: left;
}
#footer {
  background-color: blue;
  clear: both;
}

＆＃13;

<div id="banner">Webutvikling</div>

<div id="topp-meny">Meny</div>


<div id="side-meny">
  <p>sidemeny</p>
</div>

<div id="innhold">
  <p>innhold</p>
</div>

<div id="footer">
  <p>footer</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我不认为有更好的方法可以不用DIV你的Div 4和5包裹。但是代替使用float，你可以指定一个{ {1}}将每个div显示为width（稍微好一点）。

＆＃13;

＆＃13;

display : inline-block;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: yellow;
}
#banner {
  background-color: green;
}
#topp-meny {
  background-color: pink;
}
#side-meny {
  background-color: violet;
  display: inline-block;
  vertical-align: top;
}
#innhold {
  background-color: grey;
}
#footer {
  background-color: blue;
}
#wrapping {
  display: inline-block;
}

＆＃13;

＆＃13;

＆＃13;

如果没有换行，您可以在Div 3中添加<div id="banner">Webutvikling</div> <div id="topp-meny">Meny</div> <div id="side-meny"> <p>sidemeny</p> </div> <div id="wrapping"> <div id="innhold"> <p>innhold</p> </div> <div id="footer"> <p>footer</p> </div> </div>（在PX中，而不是在％中），以便Div 5保持在右侧。我不喜欢这个选项...

＆＃13;

＆＃13;

height

＆＃13;

    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: yellow;
    }
    #banner {
      background-color: green;
    }
    #topp-meny {
      background-color: pink;
    }
    #side-meny {
      background-color: violet;
      float: left;
      height: 50px;
    }
    #innhold {
      background-color: grey;
      float: left;
      width: 90%
    }
    #footer {
      background-color: blue;
      float: left;
      width: 90%
    }

＆＃13;

＆＃13;

＆＃13;

问题是您需要为子菜单指定静态高度......

Answer 2

按照您提供的图表进行操作：

#side-meny {
  float:left
}

创建一个包含#innhold和#footer的新div，让我们称之为＃right-container所以你有

<div id="right-container">
  <div id="innhold">
    <p>innhold</p>
  </div>

  <div id="footer">
    <p>footer</p>        
  </div>
</div>

然后

#right-container {
  float:right
}

看看是否有效。

Answer 3

请使用我修改过的以下代码。

     body {
        background-color: yellow;
        }
     #banner {
        background-color: green;
        }
     #topp-meny {
        background-color: pink;
        }
     #side-meny {
        background-color: violet;
        display: inline-block;
        vertical-align: top;
        width: 25%;
        }
     #block {
        display: inline-block;
        vertical-align: top;
        width: 74%;
        }
     #block p {
        margin: 0;
        }
        #innhold {
        background-color: grey;
      }
     #footer {
        background-color: blue;
        clear: both;
        }
      
     <div id="banner">Webutvikling</div>
     <div id="topp-meny">Meny</div>
     <div id="side-meny">
      <p>sidemeny</p>
      </div>
      <div id="block">
      <div id="innhold">
      <p>innhold</p>
      </div>
      <div id="footer">
      <p>footer</p>
        </div>
        </div>
         
    

Answer 4

您可以在css文件中

设置

#footer{
    ...
    position:absolute;
    left: (div3's width);
    top: (div1+div2+div4 height)
 }