CSS Div 内容与其他内容重叠答案

【问题标题】：CSS Div content overlaps with other contentCSS Div 内容与其他内容重叠
【发布时间】：2017-08-11 09:37:04
【问题描述】：

我的 CSS 脚本有问题。我的第一个 div 上的内容与另一个 div 内容重叠。

我在这里尝试了 man 解决方案，但它并没有解决我的问题

https://jsfiddle.net/ryuchix/89ws6xan/8/

我知道固定高度可以解决问题。但我不希望它是那样的。因为有时用户会输入长文本。

HTML

<div class="row" >
    <div class="col col-md-12">
        <article>
            <ul id="c" class="awards-logo"> 
                <li>
                    <a href="#"><img src="http://placehold.it/260x180"></a>
                    <p>Blah Blah Blah Blah Blah</p>  
                </li> 
                <li>
                    <a href="#"><img src="http://placehold.it/260x180"></a>
                    <p>"Australian Entreprenuer and Author, George Konstand, launches new app for Entrepreneurs!</p>  
                </li> 

                <li>
                    <a href="#"><img src="http://placehold.it/260x180"></a>
                    <p>"Australian Entreprenuer and Author, George Konstand, launches new app for Entrepreneurs!</p>  
                </li> 

                <li>
                    <a href="#"><img src="http://placehold.it/260x180"></a>
                    <p>Blah Blah Blah Blah Blah</p>  
                </li> 

                <li>
                    <a href="#"><img src="http://placehold.it/260x180"></a>
                    <p>"Australian Entreprenuer and Author, George Konstand, launches new app for Entrepreneurs!</p>  
                </li> 

                <li>
                    <a href="#"><img src="http://placehold.it/260x180"></a>
                    <p>Blah Blah Blah Blah Blah</p>  
                </li> 
            </ul>
        </article>
    </div>
</div>

CSS

article{
  min-height: 100%;
  clear: both;
}

article > ul {
  position: relative;
  margin-top: 100px;
  margin-right: 100px;
  margin-bottom: 50px;
  margin-left: 100px;
}

article > ul > li {
  width: 25%;
  list-style-type: none;
  position: absolute;
  top: 0;
  padding: 20px;
  height: 200px; 
  opacity: 0;
  padding-top: 40px;
  text-align: center;
  transition: 1s opacity; 
}

.active {
  opacity: 1;
}

#c p { 
  color: #000;
  font-weight: 100;
  font-size: 20px; 
  line-height: 1; 
  padding-top: 20px;
}

.awards-logo {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: inherit;
  padding: 50px;
}

.awards-logo li {
  float: left;
  display: inline-block;
  margin: 0 1px 2px 0;
  width: 24%;
  text-align: center;
}

.awards-logo li img{
  width: 180px
}

.screens-logo {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  padding: 50px;
}

.screens-logo li {
  float: left;
  display: inline-block;
  margin: 0 1px 2px 0;
  width: 24%;
  text-align: center;
}

.screens-logo li img{
  width: 180px
}

【问题讨论】：

标签： jquery html css responsive-design

【解决方案1】：

这里有一个解决方案https://jsfiddle.net/89ws6xan/13/

var timer = 4000;

var i = 0;
var max = $('#c > li').length;
 
    $("#c > li").eq(i).addClass('active').css('left','0');
    $("#c > li").eq(i + 1).addClass('active').css('left','25%');
    $("#c > li").eq(i + 2).addClass('active').css('left','50%');
    $("#c > li").eq(i + 3).addClass('active').css('left','75%');
 

    setInterval(function(){ 

        $("#c > li").removeClass('active');

        $("#c > li").eq(i).css('transition-delay','0.25s');
        $("#c > li").eq(i + 1).css('transition-delay','0.5s');
        $("#c > li").eq(i + 2).css('transition-delay','0.75s');
        $("#c > li").eq(i + 3).css('transition-delay','1s');

        if (i < max-4) {
            i = i+4; 
        }

        else { 
            i = 0; 
        }  

        $("#c > li").eq(i).css('left','0').addClass('active').css('transition-delay','1.25s');
        $("#c > li").eq(i + 1).css('left','25%').addClass('active').css('transition-delay','1.5s');
        $("#c > li").eq(i + 2).css('left','50%').addClass('active').css('transition-delay','1.75s');
        $("#c > li").eq(i + 3).css('left','75%').addClass('active').css('transition-delay','2s');
    
    }, timer);

article{
  min-height: 100%;
  clear: both;
}

article > ul {
    position: relative;
    height: 250px;
  }
 
  article > ul > li {
    width: 25%;
    list-style-type: none;
    position: absolute;
    top: 0;
    padding: 20px;
    height: 200px; 
    opacity: 0;
    padding-top: 40px;
    text-align: center;
    transition: 1s opacity; 
  }

  .active {
    opacity: 1;
  }

  #c p { 
    color: #000;
    font-weight: 100;
    font-size: 20px; 
    line-height: 1; 
    padding-top: 20px;
  }
  
  .awards-logo {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: inherit;
  padding: 50px;
}

.awards-logo li {
  float: left;
  display: inline-block;
  margin: 0 1px 2px 0;
  width: 24%;
  text-align: center;
}

.awards-logo li img{
  width: 180px

}

.screens-logo {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  padding: 50px;
}

.screens-logo li {
  float: left;
  display: inline-block;
  margin: 0 1px 2px 0;
  width: 24%;
  text-align: center;
}

.screens-logo li img{
  width: 180px

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" >
   <div class="col col-md-12">
    <article>
        <ul id="c" class="awards-logo"> 
            <li>
                 <a href="#"><img src="http://placehold.it/260x180"></a>
                     <p>Blah Blah Blah Blah Blah</p>  
            </li> 
            <li>
                 <a href="#"><img src="http://placehold.it/260x180"></a>
                     <p>"Australian Entreprenuer and Author, George Konstand, launches new app for Entrepreneurs!</p>  
            </li> 
            
            <li>
                 <a href="#"><img src="http://placehold.it/260x180"></a>
                     <p>"Australian Entreprenuer and Author, George Konstand, launches new app for Entrepreneurs!</p>  
            </li> 
            
            <li>
                 <a href="#"><img src="http://placehold.it/260x180"></a>
                     <p>Blah Blah Blah Blah Blah</p>  
            </li> 
            
            <li>
                 <a href="#"><img src="http://placehold.it/260x180"></a>
                     <p>"Australian Entreprenuer and Author, George Konstand, launches new app for Entrepreneurs!</p>  
            </li> 
            
            <li>
                 <a href="#"><img src="http://placehold.it/260x180"></a>
                     <p>Blah Blah Blah Blah Blah</p>  
            </li> 
          </ul>
    </article>
  </div>
</div>
          <div class="row">
              <div class="col col-md-12 screens"></div>
                <h1>Screens</h1>

             <ul class="screens-logo">
                  <li><img src="http://placehold.it/260x180"></li>
                  <li><img src="http://placehold.it/260x180"></li>
                  <li><img src="http://placehold.it/260x180"></li>
                  <li><img src="http://placehold.it/260x180"></li>
                </ul>

          </div>

更改代码

article > ul {
   position: relative;
   height: 250px;
}

由于您有 200px 到绝对子元素，您需要为父相对元素提供一些像素。

【讨论】：

但是对我来说如果他的内容的高度大于250px，它会再次重叠，这是绝对定位和可自定义内容的问题

【解决方案2】：

position: absolute删除正常流的元素。正如你所说，设置高度可以解决问题。

如果您的内容长度是可变的，您可以尝试通过 javacsript 计算和设置每个元素的高度。

另一种解决方案是在列表项上使用float 属性并将clearfix 添加到父元素，这样它将保留较大元素的height 值（这将允许您的用户编写更长的文本）。

编辑

这是一个带有float 属性的静态示例。

https://jsfiddle.net/wollsale/L0ocjk9j/

// Clearfix

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

ul {
  list-style-type: none;
}

ul:after {
  content: "";
  display: table;
  clear: both;
}

// FIRST LIST

ul.first {
  border: 1px solid red;
}

li.first__item {
  float: left;
  display: block;

  width: 25%;
}


// SECOND LIST

ul.second {
  border: 1px solid green;
}

li.second__item {
  float: left;
  display: block;

  width: 25%;
}

<div class="list">
  <ul class="first">
    <li class="first__item">
      <a href="">
        <img src="http://placehold.it/260x180">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
       </a>
    </li>
    <li class="first__item">
      <a href="">
        <img src="http://placehold.it/260x180">
        <p>Facere distinctio nostrum eius voluptas quae, blanditiis beatae illo totam officia adipisci tempora.</p>
      </a>
    </li>
    <li class="first__item">
      <a href="">
        <img src="http://placehold.it/260x180">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati modi iusto doloribus nesciunt corporis dolor maxime fuga quaerat reprehenderit odio laudantium ullam animi, quidem accusantium in, consequatur veniam tempore odit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem deserunt, veniam hic, aut accusantium illum, explicabo veritatis facilis delectus natus suscipit nostrum excepturi doloribus placeat similique numquam magni tenetur qui.</p>
      </a>
    </li>
    <li class="first__item">
      <a href="">
        <img src="http://placehold.it/260x180">
        <p>Doloremque maxime ab voluptas.</p>
      </a>
    </li>
  </ul>
  
  <ul class="second">
    <li class="second__item"><img src="http://placehold.it/260x180"></li>
    <li class="second__item"><img src="http://placehold.it/260x180"></li>
    <li class="second__item"><img src="http://placehold.it/260x180"></li>
    <li class="second__item"><img src="http://placehold.it/260x180"></li>
  </ul>
</div>

【讨论】：

【解决方案3】：

添加 height 属性并根据需要设置其值。

.awards-logo {
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: inherit;
      padding: 50px;
      height:300px
    }

【讨论】：