[分享]css两个div横向排列满格

CSS是前端开发过程中不可或缺的一部分，可以通过CSS实现页面布局、样式和交互等多种效果。在本文中，我们将探讨如何使用CSS将两个DIV横向排列并充满整个界面。 .container { displa...

CSS是前端开发过程中不可或缺的一部分，可以通过CSS实现页面布局、样式和交互等多种效果。在本文中，我们将探讨如何使用CSS将两个DIV横向排列并充满整个界面。

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
  }
  .item {
    flex: 1;
    height: 100%;
    border: 1px solid #000;
  }
</style>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
</div> 

以上是一个简单的示例。首先，我们设置了一个容器，采用了Flex布局，并在容器中通过flex-wrap属性实现了DIV换行。然后，我们设置了两个DIV元素，并指定flex属性为1，表示两个元素平分容器的宽度。最后，我们给DIV元素设置了边框和高度，使其充满整个屏幕。

这种方法适用于大部分现代浏览器。如果您需要支持较早的浏览器版本，请考虑使用其他布局方式，例如float或table布局等。同时，对于一些特定的应用场景，您也可以通过JavaScript来实现网页布局效果，使代码更加灵活。