Question

首先，这是我的 HTML

<div class="header">
  <div class="wrapper">
    <div class="navi">
      <a href="#" class="logo">Logo</a>
      <ul><!--
        --><li><a href="#" class="navlink">Link 1</a></li><!--
        --><li><a href="#" class="navlink">Link 2</a></li><!--
      --></ul>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="content">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>

和 CSS

.wrapper {
    width: 90%;
    max-width: 50em;
    margin: 0 auto;
}

.header,
.navi {
    width: 100%;
}

.header {
    background: grey;
}

.navi {
    background: green;
    display: table;
    text-align: center;
}

.navi ul {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.navi li {
    background: orange;
    display: inline;
    margin-left: 10px;
}

.navilink {
    display: inline-block;
    width: auto;
}

.logo {
    background: red;
    float: left;
}

.content {
    width: 100%;
    background: fuchsia;
}

Fiddle
Fullscreen Fiddle

您可以看到，包装器确保视口的内容和边缘之间始终存在某种间隙，超出某个点（50 em），.wrapper不会超出任何距离。

我在这里发布的代码有效，但我想知道是否有机会摆脱<div class="wrapper">取得同样的结果。我已经尝试将.wrapper类直接应用于元素，但这不起作用 - 为什么？

澄清：我的目标是让标记更清晰。这就是为什么我对解决方案感兴趣然后确保元素的行为与我发布的示例相似，但不使用<div class="wrapper">。课程.wrapper必须保持不变，只有div让我感到震惊。这就是我尝试将.wrapper直接添加到元素的原因。

Answer 1

删除包装div，并将两个CSS属性添加到内容div ..

.content { 
margin: 0 auto;
max-width: 50em;
}

直接在元素而不是周围的div上应用包装类？

1 个答案: