首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让两个div填充<body>页面宽度

要让两个div填充<body>页面宽度,可以使用CSS中的flexbox布局或者grid布局来实现。

  1. 使用flexbox布局:
    • 在<body>标签中添加一个父容器div,并设置其样式为:display: flex;。
    • 在父容器div中添加两个子div,分别表示两个需要填充宽度的div。
    • 设置子div的样式为:flex-grow: 1;,这样两个子div会平分父容器div的宽度。

示例代码:

代码语言:html
复制
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .container {
    display: flex;
  }
  .div1, .div2 {
    flex-grow: 1;
  }
</style>

<body>
  <div class="container">
    <div class="div1">Content 1</div>
    <div class="div2">Content 2</div>
  </div>
</body>
  1. 使用grid布局:
    • 在<body>标签中添加一个父容器div,并设置其样式为:display: grid;。
    • 在父容器div中添加两个子div,分别表示两个需要填充宽度的div。
    • 设置父容器div的样式为:grid-template-columns: 1fr 1fr;,这样两个子div会平分父容器div的宽度。

示例代码:

代码语言:html
复制
<style>
  body {
    margin: 0;
    padding: 0;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
</style>

<body>
  <div class="container">
    <div>Content 1</div>
    <div>Content 2</div>
  </div>
</body>

以上两种方法都可以让两个div填充<body>页面宽度,并且适用于各种场景和需求。腾讯云提供的相关产品和产品介绍链接地址可以参考腾讯云官方文档或者咨询腾讯云的客服人员获取。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券