响应式设计——当宽度变小时保持div向左对齐

Question

我有以下布局：

获得浏览器所有宽度的包装器
总是靠近浏览器右侧的wrapper-right（菜单）
header 具有最大宽度且居中
内容与 header

当分辨率低于特定步长 (32rem) 并且 wrapper_right 接近 header 我希望 header 获得更小的宽度，因此 wrapper_right 不再赘述。

问题是 header 没有保持与 content 左对齐，被设置为左，右自动。

我尝试使用 margin-left:80px，但无法正常工作。

如果分辨率低于 27rem，我希望 wrapper_right 被隐藏，header 恢复正常。

OBS。 27rem、32rem 只是举例，在代码框中可见。如果需要，我可以修改 html 代码。

.wrapper {
  height: 6rem;
  position: relative;
  width: 100%;
  background-color: red;
  display: inline-block;
}

.header {
  margin: 1.5rem auto 0;
  max-width: 30rem;
  background-color: blue;
}

@media (max-width: 32em) {
  .header {
    max-width: calc(30rem - 80px);
  }
}

.wrapper-right {
  background: green;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

.content {
  max-width: 30rem;
  margin: 0 auto;
  background-color: orange;
}

<div class="wrapper">
  <div class="header">
    <div> lorem ipsum></div>
    <div> lorem ipsum></div>
    <div> lorem ipsum></div>
  </div>
  <div class="wrapper-right">menu</div>
</div>
<div class="content">content</div>

Answer 1

这就是你想要的吗？ https://codepen.io/panchroma/pen/PxKBBV

CSS 中的重要位是：

第 36-40 行，我们在低于 40rem
第 42 - 50 行，我们隐藏 .wrapper-right，并将 .header 恢复为 full-width

仅供参考，您的 CSS 有一个名为 .l-header 的 class，但我看不出您打算用它做什么。

希望这对您有所帮助！

HTML
正如最初发布的那样

CSS

.wrapper {
  height: 6rem;
  position: relative;
  width: 100%;
  background-color: red;
  display: inline-block;
}

.header {
  margin: 1.5rem auto 0;
  max-width: 30rem;
  background-color: blue;
}

@media (max-width: 32em) {
  .l-header {
    max-width: calc(30rem - 80px);
  }
}

.wrapper-right {
  background: green;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

.content {
  max-width: 30rem;
  margin: 0 auto;
  background-color: orange;
}

@media (max-width: 40rem) {
  .header{
    width:calc(75vw - 80px);
  }
}

@media (max-width: 27rem) {
  .wrapper-right{
    display:none;
  } 

  .header{
    width:100%;
  }
}

版本 2

根据您的评论，这是版本 2 https://codepen.io/panchroma/pen/VVMJxM

重要的一点是我添加了 .header-wrapper。然后我们在各个视口更改 .header-wrapper 上的左右填充，以保持 header 和内容 div 对齐。

祝你好运！

HTML

<div class="wrapper">
  <div class="header-wrapper">
    <div class="header">
      <div> lorem ipsum></div>
      <div> lorem ipsum></div>
      <div> lorem ipsum></div>
    </div>
   </div>
  <div class="wrapper-right">menu</div>
</div>
<div class="content">content</div>

CSS

/* note that I'm using normalize.css in the CSS setings */
/* https://necolas.github.io/normalize.css/             */
.wrapper {
  height: 6rem;
  position: relative;
  width: 100%;
  background-color: red;
  display: inline-block;
  margin-right:80px;
}

.header {
  margin: 1.5rem auto 0;
  max-width: 30rem;
  background-color: blue;
  position:relative;
  z-index:5;
}


.wrapper-right {
  background: green;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
}

.content {
  max-width: 30rem;
  margin: 0 auto;
  background-color: orange;
}



@media (max-width: 40rem) {
  .header-wrapper {
    /* add  padding-right to make room for .wrapper-right    */
    /* have used 81px instead of 80px so we can be certain   */
    /* that the div isn't extending under .wrapper-right     */
    padding-right:81px;

    /* add padding-left to keep .header and .content aligned */
    /* logic is that the space to the left of .content       */
    /* is the half of the window width - width of .content   */
    padding-left:calc(50vw - 15rem);    
  }
}


/* at viewports below 27rem, hide .wrapper-right and return .header to full width */
@media (max-width: 27rem) {
  .wrapper-right{
    display:none;
  } 

  .header-wrapper{
    padding:0;
  }
}

响应式设计——当宽度变小时保持div向左对齐

Responsive design - mantain the aligment of a div to the left when the width becomes smaller

css

responsive-design

responsive