html - 响应 : display: inline-block

Question

我有两个页面部分，一个在左边(我的菜单)，一个在右边(我的内容)。现在，它们都显示为内联 block 类型，因此内容可以显示在它们菜单的右侧，然后在需要时在较小的屏幕上位于菜单下方。

我想知道，是否可以让内容框响应式调整大小，直到最小宽度，然后再对齐到我的菜单下？

下面是我的代码的设置方式:

.menu {
   display: inline-block;
   width: 300px;
   vertical-align: top;
   background-color: #222;
}

.content {
   display: inline-block;
   width: 100%;
   max-width: 650px;
   vertical-align: top;
   background-color: #222;
}

现在已经坚持了大约两个小时，环顾四周，似乎在这里或在线资源中找不到任何类似的问题，任何人都可以阐明如何解决这个问题吗？

Answer 1

正如其他人所指出的，您需要的是 CSS 中的 @media 查询。假设您的元素是 div，您可以删除 display: inline-block; 并使用 float。

.menu {
   float: left;
   width: 300px;
   vertical-align: top;
   background-color: #aaa;
   /* margin-left: 50px; -- optional, for aligning to your needs */
}

.content {
   float: right;
   width: 100%;
   max-width: 650px;
   vertical-align: top;
   background-color: #aaa;
}

@media screen and (max-width: 960px) { /* width at which layout changes  */
  .content, .menu {
    float:none;
    position: static;
    /* width: 90px; -- set to the smaller value you want */  
  }
}

@media screen and (max-width: 720px) {
  .menu {
    /* display: none; —- remove the menu, perhaps */
  }
}

@media print, screen and (max-width: 480px) {
  .content, .menu {
    /* more targetting -- usually margins and padding adjusting */
  }
}

Codepen example

CSS media queries on MDN