Question

在一个响应式布局中，我想在右侧的标题中显示徽标，但只能显示一定的宽度。但是标题的背景应扩展到页面的整个宽度。如果视口小于“最大宽度”，则徽标当然仍然应该可见。

我可以使用包装器来实现此目的，但是我想知道是否有人可以避免使用包装器。也许有一些flexbox或网格魔术。

这是一个带有包装器的工作示例，JS就是用来模拟用户调整浏览器窗口大小的：

// Simulate the user resizing the browser window:
const min = 300;
const max = 1000;
let width = min;
let add = 1;

setInterval(() => {
  document.querySelector('header').style.width = width + 'px';
  width += add;
  if (width > max) {
    add = -add;
  }
  if (width < min) {
    add = Math.abs(add);
  }
}, 1);

header {
  background: blue;
}
header::after {
  display: block;
  content: '';
  clear: both;
}
h1 {
  float: left;
}
.logo {
  float: right;
  background: white;
}
.wrapper {
  max-width: 500px;
}

<header>
  <div class="wrapper">
    <h1>Pagetitle</h1>
    <div class="logo">Logo</div>
  </div>
</header>

我想要与此标记配合使用的东西（实际代码在标头中还有更多元素）：

<header>
    <h1>Pagetitle</h1>
    <div class="logo">Logo</div>
</header>

Answer 1

这是使用flexbox

的简单解决方案

header {
  width: 100%;
  max-width: 500px;
  display: flex;
}

.logo {
  margin-left: auto; /* Pushes it as far to the right as possible. */
}

<header>
  <h1>Pagetitle</h1>
  <div class="logo">Logo</div>
</header>

Answer 2

您可以使用flex，flex-shrink flex-grow属性。以下是一些有用的链接：

这是工作示例：

header {
  background: blue;
  width: 100%;
  display: flex;
 }
h1 {
 flex: 0 2 450px;
}
.logo {
  flex: 0 2 50px;
}

<header>
  <h1>Pagetitle</h1>
  <div class="logo">Logo</div>
</header>

将元素浮动到最大宽度

2 个答案: