【问题标题】:A div in right with restricted width [duplicate]右侧的 div 宽度受限 [重复]
【发布时间】:2020-01-27 12:03:15
【问题描述】:

可用页面宽度为 1600 像素,我试图将 div 向右对齐,最大宽度为 1200 像素。但这并没有发生。

.csystem {
  display: flex;
  max-width: 1200px;
  flex-direction: column;
  justify-content: flex-end
}
<div class="csystem">
  <h1>Yes</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

【问题讨论】:

  • 您忘记在对齐内容时使用分号:css 上的 flex-end。
  • 我认为分号不是问题。

标签: html css flexbox right-align


【解决方案1】:

您应该使用align-items 而不是justify-content,因为您将flex-direction 更改为列

.csystem {
  display: flex;
  max-width: 1200px;
  /* margin-left: auto; */ /* If you wnat the div to be on the right */
  flex-direction: column;
  align-items: flex-end;
}
<div class="csystem">
  <h1>Yes</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

【讨论】:

  • 类似的解决方案不起作用here
  • 它正在工作,但主容器没有完整的宽度,如果你想容器 .csystem 在左边以及添加 margin-left: auto 在这个例子中看到jsfiddle.net跨度>
  • 边距是关键。 Flex 在这里没有用,简单的显示块和 margin-left 可以满足需要。
【解决方案2】:

试试这个:

.csystem{
    float: right;
   max-width: 1200px;
}

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-16
  • 1970-01-01
  • 2021-09-03
  • 1970-01-01
  • 2017-01-24
  • 2011-08-04
相关资源
最近更新 更多