Question

现在，我正在尝试设计一个具有以下结构的网页：

<nav>
    <ul> ... </ul>
</nav>
<section class="main">
    <nav class="menu"> ... </nav>
    <div class="row">
        <div class="column"> ... </div>
        <div class="column"> ... </div>
    </div>
</section>

元素nav.menu和div.row应水平对齐显示，第一个占据屏幕的25％，另一个占75％。

我现在正在使用这种css风格：

.main {
    display: inline;
    align-items: flex-start;
}

.menu {
    background-color: silver;
    font-family: 'Ultra', serif;
    font-size: 24px;
    width: auto;
}

.menu ul {
    list-style-type: none;
}

.menu ul li {
    text-align: center;
    width: 120px;
}

.menu ul li a {
    text-decoration: none;
    color: white;
}

.menu ul li a:hover {
    background-color: lightsteelblue;
}

.row {
    display: inline;
}

但是当我在浏览器中打开页面时，这些元素的显示方式并不像它们应该的那样。

jsfiddle：https://jsfiddle.net/klebermo/y7nka4ez/

我在这里缺少什么？

Answer 1

section.main {
  display: flex;
  height: 100px;
}
nav.menu {
  flex: 0 0 25%;
  background-color: lightgreen;
}
div.row {
  flex: 0 0 75%;
  background-color: orangered;
}

<section class="main">
  <nav class="menu"><code>nav.menu 25%</code></nav>
  <div class="row"><code>div.row 75%</code>
    <div class="column"></div>
    <div class="column"></div>
  </div>
</section>

Answer 2

当然你可以在flexbox中做到这一点，但我仍然不觉得我们可以暂时离开花车（将这归咎于那些拒绝给员工提供新浏览器的公司！），所以我的回答使用浮点数。

编码时，你应该考虑使用带有html5boilerplate，Foundation，Bootstrap等类似标准化重置的样板，它可以为你提供容器，行和列，而不是制作它们自己。

缺点是代码膨胀，但只使用你需要的框架部分并隐藏其余部分。

＆＃13;

* {
  box-sizing: border-box;
  }

.main {
    float: left;
  width 100%;
  clear: both;
  background: aqua;
}

.menu {
    background-color: blue;
    font-family: 'Ultra', serif;
    font-size: 24px;
  width: 25%;
  float: left;
}

.menu ul {
    list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu ul li a,
.menu ul li {
    text-decoration: none;
    color: white;
}

.menu ul li a:hover {
    background-color: lightsteelblue;
}

.row {
    display: inline;
}

.content {
  width: 75%;
  float: left;
  background: red;
  }

.half {
  width: 50%;
  float: left;
  background: green;
  }

＆＃13;

<section class="main">
    <nav class="menu">
    <ul>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
      </ul>
  </nav>
    <div class="content">
        <div class="half">Content text with text so we can see it flowing downwards.</div>
        <div class="half">Content text with text so we can see it flowing downwards.</div>
    </div>
</section>

＆＃13;

以内联方式显示块级元素

2 个答案: