如何横向划分网页？

Question

我正在学习HTML.我正在读书中的<div>标签.我理解它如何将网站分成垂直部分,但我也看到了人们<div>在侧边栏使用标签的例子.<div>标签如何水平工作？

Answer 1

为了让它们并排,你需要使用CSS.默认情况下,div元素的display属性设置为block.因此,它之后的元素通常会出现在下面.

要设置几列,请假设您拥有以下内容:

<div class="container">
   <div class="left"></div>
   <div class="right"></div>
</div>

您可以通过将CSS规则应用于类来设置列:

<style type="text/css">
    .container {
      width:500px;
    }
    .left {
      width:250px;
      float:left;
    }
    .right {
      width:250px;
      float:right;
    }
</style>

简而言之,我给它一个容器,以获得最大宽度.这不是必需的,但通常以这种方式完成.然后我将两个div设置为容器宽度的一半,然后我将浮动放在上面.所以所有元素都会贴在它旁边.右边的浮动是可选的.但是,如果您将容器放宽,右侧的div将粘在右侧.