当浏览器窗口扩展时，如何在菜单右侧显示<div>？

2 回答

• 0

  看来你还没有开始编码 . 这有点问题，所以我的答案会有点干，但是我们走了：

  问题1：如何为包含内容的div提供非固定宽度，以便在调整浏览器窗口大小时可以扩展或缩小 . 即使浏览器窗口大小缩小或扩展，侧边菜单仍然存在 .

  CSS Flexbox flex-basis 可能会成功 . 如果将它与relative units组合，例如百分比 .

  问题2：如何将包含内容的div放在侧边菜单旁边？我漂浮它吗？我给它一个保证金吗？我绝对定位吗？

  再次，使用CSS Flexbox .

  但是这种情况下的一般做法是什么？其他网站如何做到这一点？媒体查询？

  通常，媒体查询是一种很好的开始，是的 . 这是一个很好的指南：using media queries - MDN

  ---

  圣杯布局示例：

  

  • 按照MDN的指南：using CSS Flexible Boxes

  • 如果您遇到问题并提供一段代码，请点击这里以便我们提供帮助

  希望我帮了一下 .

  回复于 2024-04-27T11:40:48+08:00
• 0

  也许我过度简化了你的问题，但是当浏览器窗口大小改变时，使用百分比作为宽度 . 您可以点击“运行代码段”来查看它的实际效果 .

  #menu,#content {
    display: inline-block;
    vertical-align: top;
  }
  
  #menu {
    width: 20%;
    background-color: #eee;
  }
  
  #content {
    width: 79%;
  }
  

  <div id="menu">
  <ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
  <li>Item five</li>
  </ul>
  </div>
  <div id="content">
  <p>This is the content that shows up to the right of the menu on the left.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
  </div>
  

  回复于 2024-04-27T11:40:48+08:00