Question

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

我想知道，在我的菜单下对齐之前，是否可以响应地调整内容框的大小，直到最小宽度？

以下是我的代码的设置方式：

.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

Answer 2

首先发表一些评论。

内嵌块围绕其内容进行收缩缠绕，尽可能水平拉伸以包含其子项。如果在内联块中有文本，则内联块将拉伸，以便所有文本可以显示在一行中。如果后一种行为会使内联块拉伸到它本身不能与其他内联或内联块处于同一行，那么它将被移动到一个新行。

明确设置.menu的宽度不是一个好习惯。通过格式化.menu的子项隐式设置宽度。请在此处查看示例：http://jsfiddle.net/4Ueuh/。您可以通过font-size，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/。

干杯。

响应：显示：内联块

2 个答案: