CSS和HTML - 如何讓div不重疊？

Question

所以，我試圖用百分比在屏幕中間創建一個照片庫，圖像最終位於中心，並且與jquery一起正常工作以更改圖像，沒有問題，但圖像div最終疊加包含圖庫名稱的div，如何使用百分比修復圖庫div？

這裏是小提琴：https://jsfiddle.net/52gwc0j2/

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
.body{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.photoset { 
 
    position:relative; 
 
    width: 52%; 
 
    height: 69%; 
 
} 
 

 
.photoset img { 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1); 
 
}

<div class="row"> 
 
<div class="col-md-4 col-md-offset-4 text-center"> 
 
    Photoset Header 
 
</div> 
 
</div> 
 
<div class="photoset center-block"> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" /> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" /> 
 
</div>

Answer 1

我的建議是在photoset IMG位置屬性更改爲相對：

$(function() { 
 
    $('.photoset').each(function(){ 
 
    $(this).data('counter', 0); 
 
    }); 
 

 
    var showCurrent = function (photoset) { 
 
    $items = photoset.find('img'); 
 
    var counter = photoset.data('counter'); 
 
    var numItems = $items.length; 
 
    var itemToShow = Math.abs(counter % numItems); 
 
    var width = $(window).width; 
 

 
    $items.fadeOut(1000); 
 

 
    //Adjust orientation - Portrait or Landscape 
 
    if (($items.eq(itemToShow).width()/$items.eq(itemToShow).height()) > 1) { 
 

 
     photoset.css({ 
 
     width: "52%", 
 
     height: "69%" 
 
     }); 
 
    } else if (($items.eq(itemToShow).width()/$items.eq(itemToShow).height()) < 1) { 
 
     photoset.css({ 
 
     width: "23%", 
 
     height: "69%" 
 
     }); 
 
    } 
 
    $items.eq(itemToShow).fadeIn(1000); 
 
    }; 
 

 
    $('.photoset').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    var photoset = $(this); 
 
    var pWidth = photoset.innerWidth(); 
 
    var pOffset = photoset.offset(); 
 
    var x = e.pageX - pOffset.left; 
 
    if (pWidth/2 > x) { 
 
     photoset.data('counter', photoset.data('counter') - 1); 
 
     showCurrent(photoset); 
 
    } else { 
 
     photoset.data('counter', photoset.data('counter') + 1); 
 
     showCurrent(photoset); 
 
    } 
 
    }); 
 
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
.body{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.photoset { 
 
    position:relative; 
 
    width: 52%; 
 
    height: 69%; 
 
} 
 

 
.photoset img { 
 
    position: relative; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1); 
 
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-md-4 col-md-offset-4 text-center"> 
 
     Photoset Header 
 
    </div> 
 
</div> 
 
<div class="photoset center-block"> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" /> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" /> 
 
</div>

Answer 2

正如@rac所說，.photoset的高度是0，因爲它的孩子是絕對定位的。

爲了解決這個問題，請儘量少更改代碼，將您的選擇器從.photoset img更新爲.photoset img + img。這隻會在之後的目標圖片中放置圖片。這會導致您的第一張圖像設置爲.photoset的高度，並且所有後續圖像都會覆蓋在頂部。

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
.body{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.photoset { 
 
    position:relative; 
 
    width: 52%; 
 
    height: 69%; 
 
} 
 

 
.photoset img + img { 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1); 
 
}

<div class="row"> 
 
<div class="col-md-4 col-md-offset-4 text-center"> 
 
    Photoset Header 
 
</div> 
 
</div> 
 
<div class="photoset center-block"> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" /> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" /> 
 
</div>

Answer 3

而不是使用您的photoset使用padding-bottom: 50%;和亂用百分比，直到你得到你想要的高度的高度。然後設置圖像的高度爲100％，寬度爲100％，而不是頂部，左側，右側，底部。

這裏是一個小提琴Fiddle

Answer 4

正如其他人所說，使用absolute定位你的圖像是沒有意義的 - 它會使事情更難。但是，您可以使用absolute元素可以將置於之後的其他元素，而不用推送內容。我的建議是隻有一個班級能夠告訴你當前正在顯示哪個圖片。顯示的圖像將有一個relative的位置，其他將有一個absolute的位置，允許圖像出現在左上角相同的位置，但一些被遮擋而另一些可見。

下面的方法的主要優點是您的圖像可以根據您的需要調整您的包裝盒的尺寸，並且photoset可以作爲覆蓋層等內嵌放置在文檔流中......它非常靈活，所以給它一試。這也意味着你的JavaScript變得更輕鬆，更容易，因爲你需要做的就是將正確的類添加到圖像來顯示它。您還可以添加一個帶有標題的相對框，並且它可以正常工作。

// Don't worry about this, its just a quick implementation to make your photos rotate 
 
var ps = Array.prototype.slice.call(document.querySelectorAll('.photoset')).forEach(function(set){ 
 
    var all = Array.prototype.slice.call(set.querySelectorAll('img')); 
 
    var index = 0; 
 
    setInterval(function(){ 
 
    all[index].className = ''; 
 
    index = index + 1 >= all.length ? 0 : index + 1; 
 
    all[index].className = 'active'; 
 
    },1000) 
 
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
.body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.photoset { 
 
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1); 
 
    overflow: hidden; 
 
    width: auto; 
 
    display: inline-block; 
 
} 
 

 
#absolute-photoset { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    max-width: 80%; 
 
    max-height: 80%; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    z-index: 1; 
 
} 
 

 
.photoset img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    opacity: 0; 
 
    display: block; 
 
} 
 

 
.photoset img.active { 
 
    position: relative; 
 
    opacity: 1; 
 
}

<div class="photoset" id="absolute-photoset"> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" /> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" /> 
 
</div> 
 

 
<h1>My Title</h1> 
 
<div class="photoset" id="inline-photoset"> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" /> 
 
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" /> 
 
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" /> 
 
</div> 
 
<p>The above photoset seems to be pushing this text down as expected!</p>

這photoset類也推內容出它的方式，如果它是不定位絕對的，我的猜測是，你在找什麼。你也可以調整.photoset的大小，並且裏面的圖像應該跟隨（我不確定max-width是否會改變圖像的比例，如果是這樣，請只使用單向max值，如只是max-width）。

主要優點是可以治療.photoset作爲一個盒子，不用擔心它的內容，所以現在你可以在線使用，絕對定位，固定等..