并排html容器_Html - Fatal编程技术网

并排html容器

html

并排html容器,html,Html,我的主页似乎无法与左侧第一列的导航栏相邻。我已经创建了一个主页，它位于导航栏部分下，但应该在它的右侧。我尝试添加一个容器，但没有成功。有没有关于我怎么做的建议？输出应为左侧的导航栏和右侧的内容主页 {% extends 'layout.html' %} {% block body %} <div class="jumbotron text-center"> <h1>Welcome To myStocks Page</h1>

我的主页似乎无法与左侧第一列的导航栏相邻。我已经创建了一个主页，它位于导航栏部分下，但应该在它的右侧。我尝试添加一个容器，但没有成功。有没有关于我怎么做的建议？输出应为左侧的导航栏和右侧的内容

主页

{% extends 'layout.html' %}

{% block body %}
    <div class="jumbotron text-center">
        <h1>Welcome To myStocks Page</h1>
        <p class="lead">This application is built on the Python Flask framework</p>
    </div>  
{% endblock %}

{%extends'layout.html%}
{%block body%}
欢迎来到myStocks页面
此应用程序构建在Python Flask框架上
{%endblock%}

布局

<!doctype html>

<html>
    <head>
        <meta charset="utf-8">

        <title>Stocks</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"stylesheet" 

    </head>

    <body>
        {% include 'includes/_dashboard.html' %}
        <div class="container">{% block body %}{% endblock %}</div>


        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>


股票
您可能误解了元素的顺序将决定它们是显示在左侧还是右侧。情况并非总是如此
另外，include有点棘手，因为您并没有在一个地方真正看到完整的代码。要么你必须在脑海中想象它，要么你可以暂时把代码粘在一起，然后再把它拆开（变成包含）。在构建页面时，最后一种方法可能是一个好主意。构建它，然后分割它，所花费的时间可能比进行故障排除所花费的时间要少
我想说的是：
    {% include 'includes/_dashboard.html' %}
    <div class="container">{% block body %}{% endblock %}</div>

{%include'包含/_dashboard.html%}
{%block body%}{%endblock%}

不将仪表板放在左侧css将仪表板置于左侧。
看起来您在flask项目中使用了bootstrap，所以也许您应该回顾一些关于使用左侧导航仪表板构建页面的bootstrap教程-有很多可供选择，只有google
不过，我的建议是将您的flask/jinja模板构建为单个模板页面，然后稍后将其分解。或者至少先做基本的搭建，然后在微调时将其分解
Flexbox Flexbox Flexbox。。。
Bootstrap4使用flexbox，这对于布局来说是惊人的。事实上，Bootstrap3和Bootstrap4之间的核心区别是从float转移到flexbox进行布局，这一点非常重要。如果你花30分钟来学习它，你会留下深刻的印象，你会想为自己买一杯啤酒
。这是一个很好的flexbox备忘单
CSSGrid
正如flexbox出现一样，它也出现了——另一个令人惊叹的布局工具（但需要更多的学习——随后也更强大）。但你也会发现这对你很有用。实际上，从这里开始。有几种方法可以将容器与CSS对齐。（浮动、位置、网格、柔性等）
prob最简单的方法是将float:left添加到您的左菜单容器和jumbotron中。
然而，你应该考虑用响应的特殊思维来构造DOM，以及将来要添加的特征。