响应式设计：显示：内联块

Question

我有两个页面区域，一个在左边（我的菜单），一个在右边（我的内容）。现在，它们都显示为inline-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;
}

我卡在这个问题上已经两个小时了，看了看周围也找不到类似的问题或在线资源，有人能解决如何克服这个问题吗？

- SigmaDanny

---

你尝试过使用 min-width 吗？ - nullability

@nullability 是的，但是一旦浏览器的边缘到达内容框的侧面，它就会在菜单下方对齐，而不是在移动之前先调整大小。 - SigmaDanny

你尝试过使用媒体查询吗？听起来像是你的解决方案。 - Andrés Torres

我对此并不是很有经验，因为我只做过基本的响应式设计，我正在尝试学习更多，但不知道如何在这种情况下使用它，谢谢回复。 - SigmaDanny

是的，媒体查询是唯一的方法（当然除了 JS）。你应该看一下 Bootstrap 的列系统和它们的 CSS（媒体查询）。不要试图重新发明轮子，只需拿走你需要的！ - gskema

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示例

MDN上的CSS媒体查询

- nishanthshanmugham

Answer 2

首先，内联块会根据其内容进行收缩包装，并在水平方向上尽可能地伸展以容纳其子元素。如果您在内联块中有文本，则内联块将伸展，以便所有文本都可以在单行中显示。如果后一种行为使内联块伸展到无法与其他内联或内联块处于同一行的程度，则它将被移动到新行。

显式设置 .menu 的宽度不是一个好习惯。通过格式化 .menu 的子元素隐含地设置宽度。在此处查看示例：http://jsfiddle.net/4Ueuh/。您可以通过字体大小、padding-left、padding-right 等来调整菜单的宽度，使其动态增长。

你所寻求的动态行为可以通过将包含 .menu 和 .content 的元素设置为表格来实现；.menu 和 .content 将被显示为表格单元格。这样可以使 .menu 和 .content 横向排列。

HTML:

<div id = "#wrapper">
    <div class = "menu">
        <ul>
            <li><a href = "">Home</a></li>
            <li><a href = "">About</a></li>
            <li><a href = "">Team</a></li>
            <li><a href = "">Services</a></li>
            <li><a href = "">Contact us</a></li>
        </ul>
    </div>
    <div class = "content">
        <h2>Lorem Ipsum</h2>
        <p>
            Duis auctor libero vel dignissim auctor. Vestibulum ac quam ut erat lacinia rhoncus ut non urna. Suspendisse ornare blandit orci, quis malesuada augue fermentum non. Nam feugiat, augue quis tristique blandit, lorem nunc faucibus elit, in tristique urna velit non nisi. Proin mauris eros, feugiat ac magna ut, aliquam dapibus neque. Integer lorem augue, condimentum non pellentesque a, facilisis ac mauris. Ut cursus elit justo, vel molestie lectus fermentum vitae. Etiam sed commodo orci. Aenean ullamcorper eros in orci pellentesque, sit amet dictum elit feugiat. Donec orci arcu, malesuada nec condimentum id, elementum at eros. Aenean pulvinar purus ac blandit dignissim. Curabitur condimentum augue vitae justo pharetra rhoncus. Nullam nisl arcu, feugiat a risus et, posuere varius erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eget lacus libero. Praesent blandit sollicitudin nisi eu posuere.
        </p>
    </div>
</div>

初始CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 20px;
}

#wrapper {
    display: table;
}

.menu {
    display: table-cell;
}

.menu ul {
    list-style-type: none;
    border-radius: 5px 5px 0 0;
    border: 1px dotted #424242;
}

.menu ul li + li {
    border-top: 1px dotted #ccc;
}

.menu ul a {
    display: block;
    padding: 5px 15px;
    text-decoration: none;
    font: bold 12px/2 Sans-Serif;
    color: #151515;
    white-space: nowrap;
}

.menu ul li:first-of-type > a {
    border-radius: 5px 5px 0 0;
}

.menu ul a:hover {
    background-color: #ccc;
}

.content {
    display: table-cell;
    padding: 0 20px;
}

.content > h2 {
    font: normal 24px/2 Sans-Serif;
}

其他人说得很对。要将.menu和.content的水平堆叠转换为垂直堆叠，您需要一些媒体查询。但是，这种解决方案仅需要一个媒体查询来测试可用宽度是否足够小以证明需要进行垂直堆叠。

媒体查询CSS:

@media screen and (max-width: 500px) {
    .menu, .content {
        display: block;
    }

    .content {
        padding: 0;
    }

    .menu ul {
        display: table;
        width: 100%;
    }

    .menu ul li {
        float: left;
    }
}

代码中的媒体查询部分已经完成，它处理了从水平到垂直堆叠的转换。我将把剩下的样式元素留给你去完成。

还有一个示例：http://jsfiddle.net/XZ3zq/。

干杯。

- DRD