Question

在CSS中，我定义了3个断点360px，660px，800px。页面上有多个<div>标记，其中只包含文本链接。 1 <div>阻止1 <a>。

对于360px断点，每个<div>的宽度为100％。但对于其他2个断点，我希望具有<div>的正常宽度（基于文本长度的正常宽度）。如何实现660px和800px断点，因为这些断点也达到了100％。我希望这些2采用自然宽度。

Answer 1

这取决于您希望它的行为方式，您的布局目标是什么。如果你想要实现的只是div的中性宽度，那么：

div {
  display: inline-block;
}

就足够了，但如果宽度允许，它也会导致div折叠成一行。如果你希望它们保持原样，我实际上建议在容器上使用flex显示，如here

这样的div

但毕竟，这取决于你想要得到什么，而你的问题描述还不足以确定。

Answer 2

只需更改所有div的显示＆＃34; block＆＃34;和＆＃34;内联块＆＃34;有断点

像这样： -

 @media only screen and (max-width: 360px) {
  .example{
     display:block;
  }
 }


 @media only screen and (min-width: 660px) {
  .example{
    display: inline-block;
  }
 }

Answer 3

Object 是一个块级元素，这意味着默认情况下它总是占据其容器宽度的 100%。所以，不是你提到的 3 个断点，你可以只提到 1 个断点，比如 800px，并将 <div> 的 <div> 设置为 width

max-content

响应式CSS Div宽度

3 个答案: