如何在 HTML 中将屏幕分成 20/80 或 30/70 的两半？答案

【问题标题】：how to split screen into two halves of 20/80 or 30/70 in HTML?如何在 HTML 中将屏幕分成 20/80 或 30/70 的两半？
【发布时间】：2020-11-16 16:02:44
【问题描述】：

我在 HTML 中有以下结构：

<div class="row">
    <div class="col">
       <div class="leftside">
        ...leftside content here...
       </div>
    </div>
    <div class="col>
        <div class="rightside>
        ...rightside content here...
        </div>
    </div>
</div>

但是，这导致我的页面被分成两半。我想让我的左侧占页面的 30%，右侧占 70%。我怎样才能轻松做到这一点？

我正在使用 Bootstrap 在 Django 中工作。

【问题讨论】：

stackoverflow.com/a/36801591/11475846

标签： html django bootstrap-4

【解决方案1】：

您可以使用引导容器 100% = 12 md 使用此比率，您可以将其定义为 appx。 10 米和 2 米

其他选项是 css flex：你可以使用 wdht=80% 和 align_left 和 width=20% align_right

【讨论】：

【解决方案2】：

您可以使用 Bootstrap 类来实现这一点 :)

<div class="row">
<div class="col-md-4">
   <div class="leftside">
    ...leftside content here...
   </div>
</div>
<div class="col-md-8">
    <div class="rightside>
    ...rightside content here...
    </div>
</div>

对中等及以上屏幕使用 col-md。您可以将 col-sm 用于小尺寸屏幕。

你可以参考这里： https://getbootstrap.com/docs/4.1/layout/grid/

【讨论】：

【解决方案3】：

你可以用 inlinestyle 做到这一点。

 <div class="row">
    <div class="col" style="display: "flex", flexFlow: "row", width: "20vw">
       <div class="leftside">
        ...leftside content here...
       </div>
    </div>
    <div class="col>
        <div class="rightside>
        ...rightside content here...
        </div>
    </div>
</div>

【讨论】：