文本換行約2個堆疊和偏移圖像

這裏是什麼，我有一個小提琴：http://jsfiddle.net/Gwyt2/文本換行約2個堆疊和偏移圖像

的代碼

<div class="carousel-caption"> 
     <h3>Animal Facilities</h3> 
     <div class="lead"> 
      <img src="//lorempixel.com/234/156" title="" /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesent sollicitudin, nisi sed ornare sodales, tellus enim feugiat s apien, vitae egestas sem nibh quis risus. 
      <img src="//lorempixel.com/269/202" title="" /> 
     </div> 
     <a href="#" title="Animal Facilities">Learn More ></a> 
    </div>

相關CSS

#carousel img { 
    width: 100%; 
    height: auto; 
} 
#carousel .carousel-indicators { 
    bottom: 0px; 
    right: 25px; 
    left: auto; 
    width: auto; 
} 
#carousel .carousel-indicators li { 
    border-radius: 0; 
    background-color: #fff; 
    border-width: 0; 
} 
#carousel .carousel-indicators li.active { 
    background-color: #0498d7; 
} 
#carousel .carousel-caption { 
    text-align: left; 
} 
#carousel .carousel-caption a { 
    position: absolute; 
    bottom: 0; 
    color: #fff; 
    font-size: 1.2em; 
    text-transform: uppercase; 
} 
#carousel .carousel-caption h3 { 
    text-transform: uppercase; 
    font-size: 3em; 
} 
@media screen and (min-width: 768px) { 
    #carousel .carousel-caption { 
     left: 5%; 
     right: 40%; 
     top: 0; 
    } 
} 
/* slide 1 */ 
#carousel .carousel-caption img:first-of-type { 
    float: right; 
    width: 40%; 
    height: auto; 
    margin: 0 10px; 
} 
#carousel .carousel-caption img:last-of-type { 
    position: absolute; 
    right: 20%; 
    top: 51%; 
    z-index: -1; 
    width: 40%; 
    height: auto; 
}

什麼我試圖

相關的章節do是將文字分開包裹2張圖像，圖像略微偏移，所以當文字碰到下面的圖像時應該縮進。

現在你會發現，它會在較低的圖像寫

什麼我想要做的

****************** -------- 
****************** |  | 
****************** |  | 
****************** |  | 
****************** |  | 
****************** |  | 
************* -------- | 
************* |  |----- 
************* |  | 
************* |  | 
************* |  | 
************* --------

來源

2014-02-26 Kender

你目前不能用CSS做到這一點。內容不能避免使用'position：absolute'的元素，因爲它們被排除在堆疊順序之外。也許你可以做一些有趣的伎倆，兩個圖像都有'float：right'並使用負邊距，但是我有我的疑惑。 CSS區域就是你所需要的，但恐怕它們不是一個可行的選擇。 –

您可以環繞2個堆疊圖像文本與邊距一個小竅門：

#carousel .carousel-caption img:first-of-type { 
    float: right; 
    width: 40%; 
    height: auto; 
    margin: 0 10px -5% 0; 
} 
#carousel .carousel-caption img:last-of-type { 
    float: right; 
    margin-right: 20%; 
    top: 51%; 
    z-index: -1; 
    width: 40%; 
    height: auto; 
}

您需要更改HTML，文本必須在圖像之後。

fiddle

我什麼不能夠計算是如何設置下的第一個（z索引將無法正常工作）第二圖像。

你的照片總是一樣的大小？

來源

2014-02-28 21:43:56 vals

我將不得不在星期一下班嘗試。一旦決定了圖像，圖像將具有設定的高度/寬度，但目前這些數字目前未設置 – Kender

文本換行約2個堆疊和偏移圖像

回答

相關問題