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像素的絕對子元素，因此您需要爲父級相對元素提供一些像素。