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

Question

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

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

如您所见，有一个 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 将为标题和部分（300 像素和 400 像素）实现任意高度，然后是容器的最大宽度。

如何正确地做到这一点？

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

Answer 1

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

如果您想了解如何“正确”地做到这一点，我会阅读其他代码。特别是对于 TBS，我推荐Start Bootstrap。它有一堆可以查看的 TBS 主题。看看代码，看看他们是怎么做的，看看你喜欢什么，开始做吧。

最终，你如何到达那里并不重要[1]，重要的是你做到了。这是一个可行的解决方案，我看不出有什么明显的错误或骇人听闻的东西。

---

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

2. 我们都在不断学习。