无论宽度如何，将两个divs放在屏幕上

我正在制作一个网站，该网站将有两个Div，每个Div在网站的相对侧，并且会适应屏幕上都适合的尺寸。我尝试使一个Div 70％和另一个Div 25％，从理论上讲，无论大小如何，都应该以下滑。我试图使用绝对的定位，但这弄乱了我的格式，我撞到了砖墙。任何帮助或技巧都将受到赞赏。

屏幕宽度为500 px，两个divs fit。

屏幕宽度为250 px，右屏幕宽度向下滑动。

听起来您正在使用内联块，但是很难确切地知道发生了什么，而无需看到代码。尝试执行以下操作：

尝试将所有边距设置为0，包括身体。
确保在每个DIV开放之前或在每个DIV关闭后都没有空白(包括空格，标签或返回返回(。额外的空间将抛弃。

对于第2号，您可以保留结构并使用注释，以便忽略空白。

<body><!--
--><div id="70percentdiv">

   </div><!--
   --><div id="30percentdiv">
   </div><!--
--></body>

在这里我使用身体元素，但是如果您在Divs之前或之后有其他元素，则使用这些元素。同样，很难在没有看到代码的情况下确切知道发生了什么。

如今有更多高级的CSS布局，因此您无需像2000年代初期那样求助于浮动Divs。浮子应保留给最初的意义。

以下三个选项可用于在页面上布置内容。所有3个选项都是纯CSS；无需额外的库或框架。您只需要提防浏览器支持即可。查看Mozilla开发人员网络以了解更多信息。我喜欢这个资源，每天都使用它。

第一个选项是使用Flexbox。Flexbox是为一维布局而构建的，例如一排盒子，尽管如果没有足够的空间，则行可能会包裹到下一行。("包裹到下一行"不算为二维，因为您无法控制界限发生的位置。(在您的示例中，您在一行上有两个盒子，因此Flexbox是完美的。

<style>
  .row {
    display: flex;                  /* set up flexbox */
    flex-direction: row;            /* left-to-right flow */
    flex-wrap: nowrap;              /* prevent wrapping */
    justify-content: space-between; /* put all remaining space
      between the boxes, with no space on either end */
    align-items: stretch;           /* vertically stretch the boxes
      to fill the entire height of the row */
   }
  .box-main { flex: 1 1 70%; } /* suggest 70%, but allow flexibility */
  .box-side { flex: 1 1 25%; } /* suggest 25%, but allow flexibility */
  /* alternatively, if you don’t want any growing or shrinking, you can do:
  .box-main { flex: 0 0 70%; }
  .box-side { flex: 0 0 25%; } */
</style>
<div class="row">
  <main class="box-main">Main content lorem ipsum dolor ...</main>
  <aside class="box-side">Side content lorem ipsum dolor ...</aside>
</div>

许多优势弹性箱比浮子具有的优点是，您只需使用CSS即可更改项目的顺序(而不必更改标记/DOM(。因此，您不会锁定"左"内容，哪些内容在"右"上。此外，诸如.box-main和.box-side之类的"语义" classnames非常适合：在您可能想将其移至页面左侧的情况下，命名侧栏.right是很愚蠢的。

。

另一个选择是使用CSS网格，但是我不建议在这种特定情况下网格，因为它确实用于二维布局。但是，如果不是过分的话，这是可能的。

<style>
  .grid {
    display: grid;                  /* set up grid */
    grid-template-columns: 70% 25%; /* define 2 columns, in this order */
    grid-template-rows: auto;       /* define 1 row, no specified height */
    grid-column-gap: 5%;            /* gap between columns */
  }
  /* that’s it! no need for classes on the boxes */
</style>
<div class="grid">
  <main>Main content lorem ipsum dolor ...</main>
  <aside>Side content lorem ipsum dolor ...</aside>
</div>

第三个选项是使用多列布局，但在您的情况下不适用，因为它要求所有列具有相同的宽度。

相关内容

最新更新

热门标签：