定位動態格的底部

這就是我想要達到定位動態格的底部

http://i.stack.imgur.com/e9xZa.jpg

我想這

jsfiddle.net/RUSm3/

但你可以看到日期重疊在圖像上。

所以我添加左：215px的日期

jsfiddle.net/9aw29/

它看起來不錯，但也許我沒有圖像。我怎樣才能讓日期回到最左邊？我試圖達到這個沒有PHP。

來源

2010-10-31 sasa

如果你有這樣的

<div class="container"> 
    <div class="date">today</div> 
</div>

與你約會的div將被定位到它的右下角這個CSS片段的DIV的容器。

.container { 
     position:relative; 
    width: 100px; 
    height: 180px; 
    border: solid 1px black; 
} 
.date { 
     bottom:10px; 
     position:absolute; 
     right:10px; 
    }

您可以驗證它的工作here

來源

2010-10-31 19:26:20 Lorenzo

謝謝你的樣品！不過，我需要將日期對齊到左側。如果我這樣做，它將在圖像上重疊，如果我使用'right：200px'來對齊圖像的右側，則在沒有圖像時它會過於縮進。 – sasa 2010-10-31 19:46:35

@sasa：如果您提供更多的標記代碼，我們可以嘗試相應地調整樣本。我只是這樣做，因爲我不知道你的標記 – Lorenzo 2010-10-31 19:48:34

好的抱歉。我將顯示整個代碼。 – sasa 2010-10-31 19:53:46

我不知道您的標記是什麼，但最簡單的解決辦法是有標題，文本和日期都在同一個div（內.entry）如果圖像在那裏，則將圖像浮動到左側。日期將按照您在示例中已經完成的位置進行定位。當沒有圖像時，整個div將向左移動。

<div class="entry"> 
    <img [...] /> 
    <div> 
    <h2>Heading</h2> 
    <p>Entry text</p> 
    <p class="date">[Date]</p> 
    </div> 
</div>

來源

2010-10-31 19:26:31 stephenhay

thx！我試過，但日期將位於可能有更多或更少文本的div的底部。如果我將它放置在入口區域中，它將始終位於最底部，但如果沒有圖像，我不知道如何改變它。 – sasa 2010-10-31 19:44:25

說實話，我會繼續按照自己的方式去做，但是在有圖像時使用php或JavaScript來添加一個類。這個類可以通過CSS從左側開始。我知道你想避免它，但使用JavaScript的PHP將使它真正動態。 – stephenhay 2010-10-31 21:01:32

這是我想出的，可能會是一個很好的起點。總之，將兩個文本區域包裝在它們自己的div中，並將它們包裝在父div中。將父div浮動到右側，並使其位置不同於靜態。如果該位置是靜態的，則不能使用其子div的position：absolute屬性。

<style type="text/css"> 
    div.entry{ 
     float: left; 
     position: relative; 
     width: 40%; 
    } 
    img.left{ 
     float: left; 
    } 
    div.right{ 
     float: right; 
     display: inline; 
     position: absolute; 
     height: 100%; 
     width: 50%; 
    } 
    div.topRight{ 
    } 
    div.bottomRight{ 
     position: absolute; 
     bottom: 0px; 
    } 
</style> 




<div class="entry"> 
    <img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/> 
    <div class="right"> 
     <div class="topRight"> 
      Some stuff 
     </div> 
     <div class="bottomRight"> 
      Some other stuff 
     </div> 
    </div> 
</div>

來源

2010-10-31 20:38:04 Hersheezy

定位動態格的底部

回答

相關問題