html - 如何在不影响标题下方内容的情况下为 header 设置 CSS 样式，使 Logo 位于最左侧，登录名位于最右侧？

Question

我想为智能手机或平板电脑等移动设备设计一个网站。该网站应该有一个标题和标题下的内容。

我希望页眉在最左边有一个 Logo ，在最右边有一个登录名，如下图所示:

这是我尝试过的

<div >

       <div class="{style.column-left}">...</div>
       <div class="{style.column-right}">...</div>
</div>
<br/><br/>
<div class="{style.content}">...</div>

CSS

.column-left{ float: left; }
.column-right{ float: right;}

上面的 CSS 代码正确对齐了页眉，但是内容没有左对齐，看错误图片:

那么如何修复才能让内容不被header影响呢？

Answer 1

上这门课:

.clearfix::after{display:'block';content:'';clear:'both'}

像这样将它应用到您的容器元素:

<div class="clearfix"> .. </div>

什么都不改变。