CSS Div内容与其他内容重叠

Question

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

我试过的人在这里的解决方案，但它并没有解决我的问题

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 
} 

Answer 1

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

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

Answer 2

position: absolute除去正常流量的元件。正如你所说，设定高度可以解决问题。

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

另一种解决方案可以使用在列表项float财产，并添加clearfix父所以它会保持你的大元素的height值（这将使您的用户书写较长的文本）。

EDIT

这里是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>

Answer 3

在这里，你去了一个解决方案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; 
} 

由于您拥有200像素的绝对子元素，因此您需要为父级相对元素提供一些像素。