Question

我让其他所有部分都浮动了不同的方向，但是浮动的部分与包装器重叠。我怎么能不这样做呢？

另外，我尝试将浮动内容合并到css的nth-child（odd / even）中，但我无法使其正常工作。如果有人可以帮助我这样做，那么我可以摆脱浮动课程，我将不胜感激。

body,
html {
  font: 1em "Open Sans", sans-serif;
  margin: 0px;
  padding: 0px;
}

#wrapper {
  padding: 0px 10px 0px 10px;
  width: 100%;
}

.vertSection {
  width: 75%;
  height: 175px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin: 0px 0px 15px 0px;
  padding: 5px 0px 0px 10px;
  box-shadow: 0px 3px 5px #888, 0px -3px 5px #888;
  display: inline-block;
}

.vertSection:nth-child(even) {
  float: left;
}

.vertSection:nth-child(odd) {
  float: right;
  text-align: right;
}

.vertSection p {
  text-align: left;
}

.vertSection img {
  line-height: 75px;
}

.floatL {
  float: left;
}

.floatR {
  float: right;
}

.clear {
  clear: both;
}

<section id="wrapper">
  <section>
    <h1>Header</h1>

    <p>This is where some information on my services would go.</p>
  </section>

  <section class="vertSection">
    <img src="images/html5css3.png" class="floatL">

    <h2>Heading</h2>

    <p>A bunch of text and description here!</p>
  </section>

  <section class="vertSection">
    <img src="images/responsive.png" class="floatR">
    <h2>Heading</h2>

    <p>A bunch of text and description here!</p>

  </section>

  <section class="vertSection">
    <img src="images/search.jpg" class="floatL">
    <h2>Heading</h2>

    <p>A bunch of text and description here!</p>
  </section>

  <section class="vertSection">
    <img src="images/communicate.png" class="floatR">

    <h2>Heading</h2>

    <p>A bunch of text and description here!.</p>
  </section>

</section class="">

Answer 1

问题可能与此部分有关。

#wrapper {
    padding: 0px 10px 0px 10px; /*top right bottom left*/
    width: 100%;
}

所以100% + 10px + 10px导致溢出，删除width:100%它应该全部好。顺便说一下，如果某些浏览器不将其渲染为块级元素，也可以设置section {display:block;}更安全。

防止浮动右侧部分与包装器重叠

1 个答案: