在屏幕上保留两个div，不管宽度如何

问题描述：

我正在制作一个网站，该网站将有两个div，每个div位于网站的两侧，并将调整为适合屏幕的大小。我尝试了一格70％和其他25％，理论上这应该适用于任何尺寸，但它确实滑落。我试图使用绝对定位，但是这搞乱了我的格式化，而且我碰到了一堵砖墙。任何帮助或提示，表示赞赏。在屏幕上保留两个div，不管宽度如何

Screen width of 500 px, both divs fit.

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

发布您的代码，很难调试图像:-) – Capsule

如果您的利润率不是基于百分比，一旦屏幕变得足够小，div不会停留在彼此旁边。要么确保你的宽度和边距加起来不超过100％（并且确定你是否有填充，你正在使用'box-sizing：border-box'）。如果你想把你的边距保持在像px这样的单位，你可以使用'width：calc（70％ - 20px）'来设置div的宽度，其中20px是你的边距的总和。 – Santi

您是否尝试过使用Flexbox？ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – chharvey

答

这听起来像你正在使用内联块，但很难知道到底是怎么回事，没有看到你的代码。尝试执行以下操作：

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

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

<body><!-- 

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


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

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

在这里，我用身体元素，但是如果你之前或之后，立即有其他元素的div利用这些的人来代替。再次，如果没有看到代码，很难确切知道发生了什么。

答

现在有更高级的CSS布局，所以你不需要诉诸浮动divs，就像你在21世纪初会做的那样。应该为他们的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）。因此，您不会锁定哪些内容会出现在“左侧”，哪些内容会出现在“右侧”。此外，诸如.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布局，但因为它需要所有的列具有相同的宽度它不会在你的情况适用。

在屏幕上保留两个div，不管宽度如何

相关推荐