Question

我正在制作一个网站，它将有两个div，每个div位于网站的两侧，并将调整为适合屏幕的大小。我尝试将一个div设为70％，另一个设为25％，理论上它应该适用于任何大小，但确实会下滑。我试图使用绝对定位，但这搞砸了我的格式，我撞到了一堵砖墙。任何帮助或提示都表示赞赏。

Screen width of 500 px, both divs fit.

Screen width of 250 px, the right one slides down.

Answer 1

听起来你正在使用内联块，但很难在不看代码的情况下确切地知道发生了什么。尝试执行以下操作：

尝试将所有边距设置为0，包括正文。
确保在每个div打开之前或每个div关闭之后没有空格（包括空格，制表符或回车符）。额外的空间会让人失望。

对于数字2，您可以保留结构并使用注释，以便忽略空格。

<body><!--

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


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

   </div><!--
--></body>

这里我使用了body元素，但是如果你在div之前或之后有其他元素使用那些元素。同样，如果不看到您的代码，很难确切知道发生了什么。

Answer 2

现在有更高级的CSS布局，所以你不需要像21世纪初期那样使用浮动div。浮动应保留为originally meant for。

以下三个选项可用于在页面上布置内容。所有3个选项都是纯CSS;不需要额外的库或框架。您只需要注意浏览器支持。查看Mozilla Developer Network了解详情。我喜欢这种资源，我每天都会使用它。

第一个选项是使用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>

Flexbox对浮动的许多优势之一是您可以仅使用CSS更改项目的顺序（无需更改标记/ DOM）。所以你不会被锁定在＆＃34; left＆＃34;以及＃34;右边的内容是哪些内容。此外，像.box-main和.box-side这样的“语义”类名称对未来非常友好：如果您希望将侧栏移到左侧，则将侧栏命名为.right会很愚蠢。页面。

另一种选择是使用CSS Grid，但是我不会为这种特殊情况推荐网格，因为它实际上是用于二维布局。但是，如果不是矫枉过正的话，这是可能的。

<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>

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

无论宽度是多少

2 个答案: