我正在研究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）实现任意高度，然后为容器实现最大宽度。
如何正确地做到这一点？
（如果我想将徽标制作在标题上方一点；在两行之间，该怎么办？）
最佳答案
“适当”是相对的。这使这个问题很难回答。仅使用TBS，此解决方案就是我要做的。但是，相对于TBS，我倾向于更喜欢flexbox，所以我可能会以您的设置方式使用TBS容器（是的，对容器执行此操作是实现目标的有效方法。我以前使用的另一种方法是box-shadows。这两个选项都不是更好，但是现在您知道了），然后将每个行作为flexbox处理，甚至只是使用浮点数和居中。这不是一个很沉重的布局。
如果您想学习如何“正确”地进行操作，请阅读其他代码。专门针对TBS，我建议Start Bootstrap。它具有许多TBS主题，您可以查看。查看代码，看看他们是如何做的，看看自己喜欢什么，开始做。
最终，最后，无论如何到达那里[1]，都取决于您要做的事情。这是一个可行的解决方案，我看不到任何明显错误或骇人听闻的内容。
实际上很重要。但是你似乎仍然在学习中
phase [2]，所以只要您愿意
保持开放的态度并纠正发现的问题
我们都在不断学习。