的jsfiddle：

Question

我如何float <figure>标记中的元素，而文字不在填充的listing-area数字div之外？

我希望达到理想的风格：

如果在div内添加了更多内容，则会采用padding-top和padding-bottom。

见：

gemfields.com

目前，我的 CSS不遵守padding-top和padding-bottom。

我不明白的是，我确实有一个group:after来清除浮动，通常（我只是假设）它会允许内容包装，如果你喜欢在浮动div的底部，清除它，但这次对我来说并非如此。

我的CSS：

#listing {
    display: block  
}
#listing .listing-area {
    position: relative;
    width: 100%;
    padding: 140px 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0  
}
#listing .listing-area.right-listing {
    text-align: right   
}
#listing .listing-area::after {
    content:" ";
    background: -moz-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,1) 68%, hsla(0,0%,100%,1) 100%);
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0
}
#listing figcaption {
    position: relative;
    z-index: 1
}
.row-four-col {
    width: 40%
}
.fr {
    float: right
}
.group:after {
    content: " ";
    display: table;
    clear: both;
    height: -1px
}

HTML

<div id="listing">
  <div class="row">
    <div class="row-full-col row-space">
      <figure class="listing-area right-listing" style="background-image:url('https://static.pexels.com/photos/541522/pexels-photo-541522.jpeg')">
        <figcaption class="content-wrapper">
          <div class="row-four-col fr group">
            <h2>Personal Executive Coaching</h2>
            <p>Non Directive 1:1 executive coaching programmes for senior level executives. These extend typically over a minimum of 9 months and are provided by a combination of face to face meetings and, if required telephone sessions. They are personal and confidential and information is not shared with the employing organization.They provide the opportunity of personal support to executives who often find themselves relatively isolated in their role without the right opportunity to discuss personal or business concerns and review their options.</p>
            <p>Business leaders spend their time effectively ‘on stage’ in their role. Tailored coaching support provides a ‘safe rehearsal’ environment to reveal and resolve problems and dilemmas that we all from time to time face. The process facilitates such leaders to arrive at their best judgements or decisions. It does not presume to provide solutions.</p>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

的jsfiddle：

https://jsfiddle.net/LwLs839g/2/

Answer 1

您需要清除浮动元素：

请参阅：https://css-tricks.com/all-about-floats/

溢出方法依赖于在父元素上设置溢出CSS属性。如果此属性在父元素上设置为自动或隐藏，则父级将展开以包含浮动，有效地将其清除以用于后续元素。这种方法可以是精美的语义，因为它可能不需要额外的元素。但是，如果您发现自己添加一个新的div只是为了应用它，它同样是非语义的空div方法，并且适应性较差。还要记住，溢出属性不是专门用于清除浮动的。注意不要隐藏内容或触发不需要的滚动条。

#listing .listing-area {
    position: relative;
    width: 100%;
    padding: 140px 0;
  margin: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0  ;
  overflow:hidden/* clear floats*/
}

https://jsfiddle.net/LwLs839g/5/

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box
}

#listing {
  display: block
}

.row-full-col {
  width: 100%
}

.row-four-col {
  width: 40%
}

.fr {
  float: right
}

.group:after {
  content: " ";
  clear: both;
  line-height: 0;
  display: table
}

.content-wrapper {
  max-width: 1440px;
  margin: 0px auto
}

#listing .listing-area {
  position: relative;
  width: 100%;
  padding: 140px 0;
  margin: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
  overflow: hidden
}

#listing .listing-area.right-listing {
  text-align: right
}

#listing .listing-area::after {
  content: " ";
  background: hsla(0, 0%, 100%, 0);
  background: -moz-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 1) 68%, hsla(0, 0%, 100%, 1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, hsla(0, 0%, 100%, 0)), color-stop(68%, hsla(0, 0%, 100%, 1)), color-stop(100%, hsla(0, 0%, 100%, 1)));
  background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 1) 68%, hsla(0, 0%, 100%, 1) 100%);
  background: -o-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 1) 68%, hsla(0, 0%, 100%, 1) 100%);
  background: -ms-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 1) 68%, hsla(0, 0%, 100%, 1) 100%);
  background: linear-gradient(to right, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 1) 68%, hsla(0, 0%, 100%, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0
}

#listing figcaption {
  position: relative;
  z-index: 1
}

<div id="listing">
  <div class="row">
    <div class="row-full-col row-space">
      <figure class="listing-area right-listing" style="background-image:url('https://static.pexels.com/photos/541522/pexels-photo-541522.jpeg')">
        <figcaption class="content-wrapper">
          <div class="row-four-col fr group">
            <h2>Personal Executive Coaching</h2>
            <p>Non Directive 1:1 executive coaching programmes for senior level executives. These extend typically over a minimum of 9 months and are provided by a combination of face to face meetings and, if required telephone sessions. They are personal
              and confidential and information is not shared with the employing organization.They provide the opportunity of personal support to executives who often find themselves relatively isolated in their role without the right opportunity to discuss
              personal or business concerns and review their options.</p>
            <p>Business leaders spend their time effectively ‘on stage’ in their role. Tailored coaching support provides a ‘safe rehearsal’ environment to reveal and resolve problems and dilemmas that we all from time to time face. The process facilitates
              such leaders to arrive at their best judgements or decisions. It does not presume to provide solutions.</p>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

浮动元素但仍将其保留在父指定的填充内

的jsfiddle：

1 个答案: