divs和背景圖像

所以這裏是我想解決的問題，我想使用500像素寬的背景圖像，我的div在右邊有一個投影但是我希望文本停止並且在475px之後換行，我仍然希望整個圖像顯示出包含陰影。無論如何要完成這個？divs和背景圖像

的html代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Untitled Document</title> 
     <link href="tech/sandbox2.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <div id="page1top">top</div> 
     <div id="page1mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</div> 
     <div id="page1btm">this is the bottom</div> 
    </body> 
</html>

CSS代碼：

@charset "UTF-8"; 
/* CSS Document */ 

#page1top{ 
    position:relative; 
    background:url(../media/page1top.png) no-repeat; 
    width:500px; 
} 
#page1mid{ 
    position:relative; 
    background:url(../media/page1mid.png) repeat; 
    overflow:visible; 
    width:500px; 
    height:auto; 
    padding:30; 
    margin:30; 
    top:-10; 
} 
#page1btm{ 
    position:relative; 
    width:500px; 
    background:url(../media/page1btm.png) no-repeat; 
}

來源

2010-10-07 Joe

這取決於你正在使用的HTML，你可以在某處發佈演示[JS Bin]（http://jsbin.com）和[JS Fiddle]（http://jsfiddle.net）都適用於這個，或者至少在這裏發佈代碼。 – 2010-10-07 17:50:59

使用嵌套<div>標籤。雖然@ Robusto的建議並不正確，但它在語義上並不理想。它將一個設計元素與一個樣式描述符混合在一起。您的塊元素應該確定這種設計間距，然後使用元素樣式來控制文本本身的邊距/填充。

CSS：

#page1top{ 
    position:relative; 
    background:url(../media/page1top.png) no-repeat; 
    width:500px; 
} 
#page1mid{ 
    position:relative; 
    background:url(../media/page1mid.png) repeat; 
    overflow:visible; 
    width:500px; 
    height:auto; 
    padding:30; 
    margin:30; 
    top:-10; 
} 
#page1btm{ 
    position:relative; 
    width:500px; 
    background:url(../media/page1btm.png) no-repeat; 
} 
.content_container{ 
    width: 475px; 
    overflow: inherit; 
}

HTML：

<div id="page1top">top</div> 
<div id="page1mid"> 
    <div class="content_container"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</p> 
    </div> 
</div> 
<div id="page1btm">this is the bottom</div>

來源

2010-10-07 17:55:13

我在回答中純粹用了風格屬性來快速說明概念。 – Robusto 2010-10-07 18:50:28

@Robusto - 我可以欣賞。我只想指出我們答案中的細微差別。就像我說過的，我根本不認爲你的答案是不正確的，但是我不想讓它看起來像我剛纔所說的那樣反芻着。 – 2010-10-07 19:40:01

保持格在500像素寬，把文本里面的p標籤，在寬度p標籤設置爲475px。

<div class="shadow-div" style="width:500px"> 
    <p style="width:475px"> 
    Text here blah blah blah. 
    </p> 
</div>

來源

2010-10-07 17:51:44 Robusto

你能修改你的HTML嗎？

<div class="fancybackground"><div class="text">something</div></div>

CSS：

.fancybackground { background: url(...) } 
.text { margin-right: 25px; }

來源

2010-10-07 17:52:39 atomizer

如果您在填充申報單位，這可能會自動發生的爲您服務。將padding: 30;更改爲padding: 30px;。如果您需要更多填充，請調整數字。如果你不想在每一邊填充，就寫下來：padding: 10px 25px 10px 10px;。測量值順時針旋轉，因此它沿着頂部，右側，底部，左側移動;

來源

2010-10-07 17:59:48 Marcus

divs和背景圖像

回答

相關問題