Question

所以这里是我试图解决的问题，我想使用宽度为500px的背景图像为我的div在右边缘有一个投影但是我希望文本停止并在475px之后换行我仍然希望整个图像显示出包含阴影。无论如何要做到这一点？

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;
}

Answer 1

将div保持在500px宽，并将文本放在其中的p标签中，将p标签设置为宽度为475px。

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

Answer 2

使用嵌套的<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>

Answer 3

如果你在填充上声明单位，这可能会自动发生。将padding: 30;更改为padding: 30px;。如果您需要更多填充，只需调整数字即可。如果您不希望填充在每一侧均匀，请按以下方式编写：padding: 10px 25px 10px 10px;。测量顺时针方向移动，使其向上，向右，向下，向左移动;

Answer 4

可以修改HTML吗？

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

CSS：

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

div和背景图片

4 个答案: