制作此布局的正确方法是什么？

Question

我正在研究Web开发几个月，我通常在前端和UI布局方面遇到一些问题。我经常难以将元素准确放置在我想要的位置。在这种情况下，要么我使用相对值并破坏网站的响应能力，要么我写了一些看起来像黑客的规则。

例如，让我们考虑一下这张图片：

如您所见，有一个Bootstrap容器，全宽背景色，容器内有两个经典元素，外面有一个图像。
对于这种布局，我会做类似以下的事情：

    <!-- /* MAIN WRAPPER -->
    <div class="pull-right">
        <img src="/img/topright_image.PNG" alt="shape">
    </div>
    <div class="bg-red"> <!-- Red background color. -->
        <div class="container">
            <header class="row">
                <div class="hidden-sm hidden-xs col-sm-2" id="logo"> <!-- I'm using Bootstrap 3, IIRC there's a better way to do that in Bootstrap 4. -->
                    <img src="/img/logo.PNG" alt="logo">
                </div>
                <div class="col-sm-6 col-sm-push-3" id="title"> <!-- First difficulty, how to make sure the title will always be centered without being relative to the logo and no matter its content? --> 
                    <h1>Centered title</h1>
                </div>
            </header>
        </div>
    </div>

    <div class="bg-green"> <!-- Multiple containers, just to have colored backgrounds at 100% width of the page. -->
        <div class="container">
            <section></section>
        </div>
    </div>
    <!-- MAIN WRAPPER */ -->

这是一个快速草案，但你明白了。然后CSS将为标题和部分（300px和400px）实现任意高度，然后是容器的最大宽度。

如何正确地做到这一点？

（如果我想让徽标略高于标题，两行之间怎么办？）

Answer 1

“正确”是相对的。这使得这个问题难以回答。只使用 TBS，这个解决方案就是我的方法。但是，我倾向于支持flexbox而不是TBS所以我可能会使用TBS容器来设置它（是的，对容器执行此操作是实现目标的有效方法。我以前使用的另一种方法是box-shadows。两种选择都不是更好，但现在你知道了），然后将每一行作为弹性框处理，甚至只是简单地使用浮动和居中。这不是一个非常沉重的布局。

如果您希望“正确”学习如何操作，我会阅读其他代码。特别是对于TBS，我建议Start Bootstrap。它有一堆你可以看的TBS主题。看看代码，看看他们是怎么做的，看看你喜欢什么，开始这样做。

归根结底，最终到达目的地并不重要[1]。这是一个可行的解决方案，我没有看到任何明显的错误或hackish。

1. 这实际上很重要。但你似乎还在学习中 阶段[2]所以只要你愿意，这并不重要 保持开放的心态并纠正发现的事情

2. 我们都在学习。