如何横向划分网页？

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将粘在右侧。

Answer 2

它被认为是块元素，宽度为100％。

我建议您在文本编辑器中进行尝试。您的浏览器添加了背景颜色和一些内容。