內聯塊顯示div的位置相對

我有一系列的圖像，每個都有自己的覆蓋圖。我如何讓它們像內聯塊一樣對齊？我嘗試添加display: inline-block;到.image-wrapper，但圖像總是位於div.container（這裏是jsfiddle）的左上角。內聯塊顯示div的位置相對

這裏是HTML和CSS

.container { 
 
    position: relative; 
 
} 
 
.image-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.tweetty { 
 
    position: absolute; 
 
    overflow: auto; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image-vest { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #00f; 
 
    width: 220px; 
 
    height: 300px; 
 
    opacity: 0.4; 
 
    color: #fff; 
 
}

<div class="container"> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-one</div> 
 
    </div> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-two</div> 
 
    </div> 
 

 
</div>

編輯：

與dfsq建議修訂CSS從.tweetty刪除position:absolute;。

報價dfsq評論：「絕對無助於他們的父容器的寬度和高度位置元素，因此圖像包裝的div只是崩潰，就好像它們是空的，如果所有的孩子都有position:absolute;。」

.container { 
 
    position: relative; 
 
} 
 
.image-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.tweetty { 
 
    overflow: auto; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image-vest { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #00f; 
 
    width: 220px; 
 
    height: 300px; 
 
    opacity: 0.4; 
 
    color: #fff; 
 
}

<div class="container"> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-one</div> 
 
    </div> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-two</div> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-three</div> 
 
    </div> 
 
</div>

來源

2015-07-19 klode

刪除'位置：從'.tweetty' absolute'。 – dfsq

@dfsq感謝這是解決方案。我的理解是，根據'top'和'left'座標，每個'position：relative'孩子都會被放置在'position：absolute'父母的內部。顯然這對於背心而言並不是tweetty。我錯過了什麼？ – klode

@dfsq好簡潔的回答！它的原因是什麼？謝謝。 – rapvelopment

我擺弄擺弄，這似乎工作。去除了所有除了背心之外的所有定位。使用內嵌塊顯示模式。將頂部設置爲-300像素，也是底部邊距，否則會在圖像下方留下間隙。

.container { 
 
/* position:relative;*/ 
 
} 
 
.image-wrapper { 
 
/* position: relative;*/ 
 
    display: inline-block; 
 
} 
 
.tweetty { 
 
/* position:absolute; 
 
    overflow:auto; 
 
    top:0; 
 
    left:0;*/ 
 
} 
 
.image-vest { 
 
    position:relative; 
 
    top:-300px; 
 
    margin-bottom: -300px; 
 
    left:0; 
 
    background-color:#00f; 
 
    width:220px; 
 
    height:300px; 
 
    opacity:0.4; 
 
    color:#fff; 
 
}

<div class="container"> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-one</div> 
 
    </div> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-two</div> 
 
    </div> 
 

 
    <div class="image-wrapper"> 
 
    <div class="tweetty"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" /> 
 
    </div> 
 
    <div class="image-vest">Tweetty-three</div> 
 
    </div> 
 
</div>

（這裏的JSFiddle版）

來源

2015-07-19 20:55:15 Amit

內聯塊顯示div的位置相對

回答

相關問題