css - 宽度灵活的灯箱

Question

我正在尝试为我的一个元素制作一个 float 菜单，但我无法让它工作。

我的目标是让一个水平菜单 float 在屏幕中间，下面有一个内容 div。内容 div (#preferencescontent) 的宽度不应超过其中的内容，但不应超过屏幕的 90%。

现在来解决问题。它有时似乎有效，但原因不明。一些表格将 div 缩小到菜单的大小，而其他表格则扩展了很多。我添加了一个示例，出于某种原因，它扩展了 div 的方式超出了我的预期。

这是代码(下面的codepen):

<div class="lightbox" id="preferencesdiv">
    <div id="preferencesholder">
        <div class="sidemenu">
            <div id="deviceoverviewbutton" class="menuitem">Device overview</div>
            <div id="irulesbutton" class="menuitem">Defined iRules</div>
            <div id="certificatebutton" class="menuitem">Certificates</div>
            <div id="logsbutton" class="menuitem">Logs</div>
            <div id="preferencesbutton" class="menuitem">Preferences</div>
            <div id="helpbutton" class="menuitem">Help</div>
        </div>
        <div id="preferencescontent">
            <div id="helpcontent">
            <h2>Tips and tricks</h2>
            <h3>Filtering for pool members being down</h3>
            <p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
            <p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>

        </div>
    </div>
</div>

https://codepen.io/anon/pen/vdOXWj

感谢任何帮助。谢谢!

Answer 1

您可以尝试从您的元素中删除 float。

此外，您正在向未指定显式 position 的元素添加定位坐标，因此您可以删除它们。

codepen

:root {
  --alternatetablecolor: #f9f9f9;
  --headerbackgroundcolor: #efefef;
  --headerfontcolor: #333;
  --bordercolor: #dddddd;
  --defaultfontcolor: #222;
}

.lightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
}

div#preferencesholder {
  background: #fff;
  display: inline-block;
  text-align: left;
  max-height: 75%;
  max-width: 90%;
  overflow: hidden;
  padding: 0px;
  border: 1px #000 solid;
  -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  margin-top: 100px;
}

div#preferencescontent {
  overflow-y: scroll;
  max-height: 80%;
  margin: 10px;
  width: 100%;
}

div.sidemenu {
  background-color: var(--headerbackgroundcolor);
  width: 100%;
  text-align: center;
}

div.sidemenu div.menuitem {
  padding: 10px;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  margin: 0px -2px 0px -2px;
}

div.sidemenu div.menuitem img {
  max-height: 30px;
  vertical-align: middle;
}

div.menuitem:hover {
  background-color: #d0d0d0;
  cursor: pointer;
}

div#helpcontent {
  max-width: 550px;
  margin: 0 auto;
}

<div class="lightbox" id="preferencesdiv">
  <div id="preferencesholder">
    <div class="sidemenu">
      <div id="deviceoverviewbutton" class="menuitem">Device overview</div>
      <div id="irulesbutton" class="menuitem">Defined iRules</div>
      <div id="certificatebutton" class="menuitem">Certificates</div>
      <div id="logsbutton" class="menuitem">Logs</div>
      <div id="preferencesbutton" class="menuitem">Preferences</div>
      <div id="helpbutton" class="menuitem">Help</div>
    </div>
    <div id="preferencescontent">
      <div id="helpcontent">
        <div id="helpcontent">
          <h2>Tips and tricks</h2>
          <h3>Filtering for pool members being down</h3>
          <p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
          <p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>

        </div>
      </div>
    </div>
  </div>