意外的CSS行为

Question

意外的CSS行为

7

我遇到了一些布局问题，无法解释。

布局HTML

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AuctionProject</title>

    <script async type="application/dart" src="auctionproject.dart"></script>
    <script async src="packages/browser/dart.js"></script>

    <link rel="stylesheet" href="auctionproject.css">
  </head>
  <body>    
    <div id="menu_bar">
      <div id="logo"></div>
      <div class="menu_tab" id="123">Tab123</div>
      <div class="menu_tab" id="upcomming">Tab456</div>
    </div>
    <div id="content_box">
      <div id="side_menu">
        <div id="open_menu_shadow"></div>
        <div id="menu_content" class="hidden">
          <div id="account" class="side_label hidden">
            <p class="tiny">You are currently logged in as:</p>
            <p id="current_user">Some User</p>
            <p class="tiny">This is not you?
              <span class="important" id="log_out" role="button" tabindex="0" style="cursor: pointer;">Log Out</span>
            </p>
          </div>
          <div id="login_box" class="side_label">
            <input type="text" name="login" placeholder="Login">
            <input type="text" name="password" placeholder="Password">
            <button type="button">Sign In</button>
            <p class="tiny">Don't have an account? <span class="important" id="register" role="button" tabindex="0" style="cursor: pointer;">Register</span></p>
          </div>
          <hr>
          <div class="side_label">Add Category</div>
          <div class="side_label">Super category 1</div>
          <hr>
          <div class="side_label">Popular #tags:
            <ol id="trendingTags">
              <li><div class="label">#Tag123</div></li>
              <li><div class="label">#Tag456</div></li>
            </ol>
          </div>
        </div>
        <div id="open_menu"><p>&lt &lt &lt &lt &lt &lt &lt &lt &lt &lt</p></div>
      </div>
      <div id="smart_box">

      </div>
      <div id="auction_list">
        <div class="auction">
          <img src=""></img>
          <div class="title">This is a sample title</div>
          <div class="teaser">This is a sample teaser </div>
        </div>
        <div class="auction">
          <img src=""></img>
          <div class="title">This is a sample auction title</div>
          <div class="teaser">This is sample teaser </div>
        </div>        
      </div>
    </div>
  </body>
</html>

CSS 布局

body {
  background-color: #FFF;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 0px;
  position: absolute;
  height: 100%;
  width: 100%;
}

h1, p {
  color: #333;
}

#menu_bar {
  width: 100%;
  height: 60px;
  padding-bottom: 2px;
  border-bottom: 1px solid #aaa;
  background-color: #F8F8F8;
}

#logo {
  height: 60px;
  width: 200px;
  margin-right: 40px;
  background-color: blue;
  display: inline-block;
}

.menu_tab {
  margin-left: 25px;
  padding: 4px 4px 0px 4px;
  border-left: 1px solid #aaa;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  font-size: 1.2em;
  display: inline-block;
  bottom: 0;
  background-color: #ccc;
}

#menu_tab_selected {
  margin-left: 20px;
  padding: 4px 4px 0px 4px;
  border-left: 1px solid #aaa;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  font-size: 1.2em;
  display: inline-block;
  bottom: 0;
  background-color: #fff;
}

#content_box {
  boarder: 2px solid red;
  width: 100%;
  height: 100%;
}

#side_menu{
  boarder: 1px solid #aaa;
  height: 100%;
  position: absolute;
  display: inline-block;
  background-color: #F8F8FF;
  float: left;
}

#open_menu {
  border: 1px solid #aaa;
  border-top: 0px solid #aaa;
  display:inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 100%;
  background-color: #eee;
  z-index: 3;
}

#open_menu_shadow {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 100%;
  box-shadow: -7px 0px 5px #aaa;
  position: absolute;
  z-index: 1;
}

#open_menu p {
  text-align: center;
  vertical-align: bottom;
}

#menu_content {
  width: 200px;
  height: 100%;
  display: inline-block;
  float: right;
}

#menu_content hr {
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #999;
    margin-top: 20px;
    margin-bottom: 20px;
}

.hidden {
  display: none;
}

.tiny {
  font-size: 0.7em;
}

.important {
  color: red;
}

#login_box input {
  width: 120px;
  margin-bottom: 10px;
}

#current_user {
  margin: 4px;
}

.side_label {
  border: 1px solid #aaa;
  border-top-left-radius: 4px;
  border-bottom-left-radius:4px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  padding: 10px;
  padding-right: 35px;
  box-shadow: -7px 7px 5px #aaa;
  position: relative;
  background-color: #fff;
  z-index: 2;
}

.label {
  margin: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  font-size: 0.8em;
  font-weight: bold;
  display: inline-block;
  background-color: #ccc;
}

#auction_list {
  margin-left: 200px;
  padding: 20px;
  position: absolute;
  display: inline-block;
  overflow: auto;
  width: calc(100% - 250px);
}

.auction {
  padding: 10px;
  margin-bottom: 10px;
  boarder: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #aaa;
}

.auction img {
  width: 60px;
  width: 60px;
}

.auction .title {
  font-size: 1.2em;
  text-decoration: underline;
}

#smart_box {
  margin: 10px;
  width: 300px;
  height: 200px;
  float: right;
  border: 1px solid #aaa;
}

我第一个问题与 display:none 属性有关。您可以在左侧看到菜单（id="side_menu"），其中包含一个带有 id="menu_content" 的 div，以及右侧的条形图（id="open_menu"）。为了切换菜单，我创建了一个包含 display:none 属性的类 .hidden。我期望当我将这个类添加到 "menu_content" div 上时，它会消失。不幸的是，什么也没发生。 layout menu

我认为我的另一个问题与 inline-block 属性有关。我想让主要内容列表 id="auction_list" 填满下面的空间，如下所示。 layout content

这意味着它应该相对于菜单，所以在切换菜单时我不必更改左边距。同时我不知道如何防止发布内容 (class="auction") 移动到右侧的 div 下方 (id="smart_box")。

非常感谢您的帮助。

免责声明：请不要假设太多先前的知识。我是一个 HTML 新手。

- Lukasz

3个回答

1

1) 在 #side_menu 中，您写成了 boarder 而不是 border。

#side_menu {
  boarder: 1px solid #aaa;
  height: 100%;
  position: absolute;
  display: inline-block;
  background-color: #F8F8FF;
  float: left;
}

2) 在CSS中有一个概念，可以给CSS规则赋予更多或更少的“权重”。当你写：

#menu_content {
  display: inline-block;
}

.hidden {
  display: none;
}

也许你认为 class="hidden" 会覆盖 id="menu_content"。这通常是正确的，因为 .hidden 在你的 CSS 文件中是在 #menu_content 之后编写的。但事实并非如此，因为具有#id 的 CSS 规则比 .class 更具权重。

如果你想使事情正常运行，有两个选择：

- 在你的 .hidden 类中写入 display: none !important。 !important 给予最高规则优先级，但不是一个很好的做法。 - 简单地写入： ``` #menu_content.hidden { display: none; } ``` 最后一个选项将获得更多的权重，因为它更加具体：你说应用 CSS 规则显示到 1) class="hidden" 元素上 2) 并且该元素包含属性 id="menu_content"。更具体意味着更多的权重。

#id比.class更具体，而<element>则更具体。

要了解CSS权重的更多信息，请参见MDN或CSS-Tricks

3）针对您最后一个问题，这里有一个小建议，可能不是完美的，但易于理解。

从编辑HTML开始：将您的智能框放在拍卖清单中，在开头处。

<div id="auction_list">
  <div id="smart_box"></div>
  <div class="auction">(blabla)</div>
  <div class="auction">(blabla)</div>
</div>

我知道这不是解决你问题的正确方式（从语义上来说），但现在，让我们编辑CSS... 对于#auction_list，请删除position、display和width属性。

#auction_list {
  margin-left: 200px;
  padding: 20px;
  overflow: auto;
}

对于“.auction”，只需添加内联块。

.auction {
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #aaa;
  display: inline-block;
}

但请注意，.auction 元素的宽度将根据其内容而变化（如果您没有指定 width，那就是 inline-block 的工作原理）。这意味着在浏览器渲染中，您可能会遇到 2 个“行”上的拍卖。我认为，改进此结构将取决于您对其进行的操作和设计选择。

该提案的想法是：不要触及 #auction_list 的定位，最好处理其中的元素。

希望有所帮助。 :)

- meduz'

@mdeduz 感谢您详细的回答。我只有一个额外的问题。您是否知道是否有一种方法可以将 id=auction_list 的边距相对于 id=side_menu 而不是 id=content_box 设置？我需要用另一个 div 包装侧边菜单吗？这将非常有用，因为在折叠侧边菜单时，我不必以编程方式更改边距。 - Lukasz

嗨@Lukasz。我想我明白你的意思了。尝试在#side_menu上设置margin-right: 10px（10px是为了举例），并将#auction_list的margin-left设置为0（或删除margin-left属性）。 - meduz'

嗨@Lukasz！我可以请你将问题标记为已解决，并验证你认为正确的答案吗^^ - meduz'

0

你的 display: none; 问题可以通过 display: none !important; 来解决。

- SebHallin

2

@copeg，你为什么说这不是答案？就我所看到的，OP有两个问题，第一个问题正是涉及到这个方面（“我的第一个问题与display:none属性有关”）。 - David van Driessche

感谢@Sebastian。这和以上的回答一样非常有帮助。我只有一个补充：如果有人尝试这个，请不要忘记为我的id="side_menu"的相当部分设置一个min-width。否则，它也会折叠，打开的栏将不可见。 - Lukasz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ramiz Wachtler · Accepted Answer

要隐藏/显示导航栏，您需要一些Javascript或jQuery。这是一个例子，不需要对您的代码进行很多修改，特别是您的HTML。

1 - 将jQuery包含到您的项目中，在我的示例中，我使用了2.1.3版本。

2 - 这是隐藏/显示侧边栏的jQuery部分。

$(document).ready(function () {
    $("#open_menu").click(function () {
        $("#side_menu").toggleClass('open');
        //toggles full class on auction_list element (see snippet for live example)
        $("#auction_list").toggleClass('full');
    });
});

2a - 每次单击您的#open_menu元素时，上面的代码都会被执行并在#side_menu上切换一个名为open的类。

3 - 为了使整个过程正常工作，我们还需要对您的CSS进行一些更改。

#side_menu {
    boarder: 1px solid #aaa;
    height: 100%;
    position: absolute;
    display: inline-block;
    background-color: #F8F8FF;
    float: left;
    /* the lines below were added */
    width: 14px;
    transition: width 0.8s ease-in;
    -webkit-transition: width 0.8s ease-in;
    -moz-transition: width 0.8s ease-in;
}
/* this is new */
#side_menu.open {
    width: 200px;
}

3a - 我们将整个#side_menu元素的宽度设置为14像素，这样只有您的#open_menu元素是可见的。一些额外的：添加一些花哨的过渡效果（对于属性width）

3b - 一个新的CSS规则用于open状态，只需将您的#side_menu元素的宽度设置为200像素。

SNIPPET

$(document).ready(function() {
  $("#open_menu").click(function() {
    $("#side_menu").toggleClass('open');
    $("#auction_list").toggleClass('full');
  });
});

body {
  background-color: #FFF;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 0px;
  position: absolute;
  height: 100%;
  width: 100%;
}
h1,
p {
  color: #333;
}
#menu_bar {
  width: 100%;
  height: 60px;
  padding-bottom: 2px;
  border-bottom: 1px solid #aaa;
  background-color: #F8F8F8;
}
#logo {
  height: 60px;
  width: 200px;
  margin-right: 40px;
  background-color: blue;
  display: inline-block;
}
.menu_tab {
  margin-left: 25px;
  padding: 4px 4px 0px 4px;
  border-left: 1px solid #aaa;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  font-size: 1.2em;
  display: inline-block;
  bottom: 0;
  background-color: #ccc;
}
#menu_tab_selected {
  margin-left: 20px;
  padding: 4px 4px 0px 4px;
  border-left: 1px solid #aaa;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  font-size: 1.2em;
  display: inline-block;
  bottom: 0;
  background-color: #fff;
}
#content_box {
  boarder: 2px solid red;
  width: 100%;
  height: 100%;
}
#side_menu {
  boarder: 1px solid #aaa;
  height: 100%;
  position: absolute;
  display: inline-block;
  background-color: #F8F8FF;
  float: left;
  width: 14px;
  transition: width 0.8s ease-in;
  -webkit-transition: width 0.8s ease-in;
  -moz-transition: width 0.8s ease-in;
}
#side_menu.open {
  width: 200px;
}
#open_menu {
  border: 1px solid #aaa;
  border-top: 0px solid #aaa;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 100%;
  background-color: #eee;
  z-index: 3;
}
#open_menu_shadow {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 100%;
  box-shadow: -7px 0px 5px #aaa;
  position: absolute;
  z-index: 1;
}
#open_menu p {
  text-align: center;
  vertical-align: bottom;
}
#menu_content {
  width: 200px;
  height: 100%;
  display: inline-block;
  float: right;
}
#menu_content hr {
  border: 0;
  border-bottom: 1px dashed #ccc;
  background: #999;
  margin-top: 20px;
  margin-bottom: 20px;
}
.hidden {
  display: none;
}
.tiny {
  font-size: 0.7em;
}
.important {
  color: red;
}
#login_box input {
  width: 120px;
  margin-bottom: 10px;
}
#current_user {
  margin: 4px;
}
.side_label {
  border: 1px solid #aaa;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  padding: 10px;
  padding-right: 35px;
  box-shadow: -7px 7px 5px #aaa;
  position: relative;
  background-color: #fff;
  z-index: 2;
}
.label {
  margin: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  font-size: 0.8em;
  font-weight: bold;
  display: inline-block;
  background-color: #ccc;
}
#auction_list {
  margin-left: 0;
  padding: 20px;
  position: absolute;
  display: inline-block;
  overflow: auto;
  width: calc(100% - 250px);
  transition: margin 0.8s ease-in;
}
#auction_list.full {
  margin-left: 200px;
}
.auction {
  padding: 10px;
  margin-bottom: 10px;
  boarder: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #aaa;
}
.auction img {
  width: 60px;
  width: 60px;
}
.auction .title {
  font-size: 1.2em;
  text-decoration: underline;
}
#smart_box {
  margin: 10px;
  width: 300px;
  height: 200px;
  float: right;
  border: 1px solid #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu_bar">
  <div id="logo"></div>
  <div class="menu_tab" id="123">Tab123</div>
  <div class="menu_tab" id="upcomming">Tab456</div>
</div>
<div id="content_box">
  <div id="side_menu">
    <div id="open_menu_shadow"></div>
    <div id="menu_content" class="hidden">
      <div id="account" class="side_label hidden">
        <p class="tiny">You are currently logged in as:</p>
        <p id="current_user">Some User</p>
        <p class="tiny">This is not you? <span class="important" id="log_out" role="button" tabindex="0" style="cursor: pointer;">Log Out</span>

        </p>
      </div>
      <div id="login_box" class="side_label">
        <input type="text" name="login" placeholder="Login">
        <input type="text" name="password" placeholder="Password">
        <button type="button">Sign In</button>
        <p class="tiny">Don't have an account? <span class="important" id="register" role="button" tabindex="0" style="cursor: pointer;">Register</span>
        </p>
      </div>
      <hr>
      <div class="side_label">Add Category</div>
      <div class="side_label">Super category 1</div>
      <hr>
      <div class="side_label">Popular #tags:
        <ol id="trendingTags">
          <li>
            <div class="label">#Tag123</div>
          </li>
          <li>
            <div class="label">#Tag456</div>
          </li>
        </ol>
      </div>
    </div>
    <div id="open_menu">
      <p>&lt &lt &lt &lt &lt &lt &lt &lt &lt &lt</p>
    </div>
  </div>
  <div id="smart_box"></div>
  <div id="auction_list">
    <div class="auction">
      <img src=""></img>
      <div class="title">This is a sample title</div>
      <div class="teaser">This is a sample teaser</div>
    </div>
    <div class="auction">
      <img src=""></img>
      <div class="title">This is a sample auction title</div>
      <div class="teaser">This is sample teaser</div>
    </div>
  </div>
</div>