我想在文字周围创建一个奇特的框架。我最终将它包装在以下DIV中:
____________________
|__________________|
| | Here will | |
| | be some | |
| | text | |
| | ... | |
|_|______________|_|
|__________________|
因此它由以下块组成:上部块(topDiv),它占据列的整个宽度。文本本身(textDiv)。框架的左(leftDiv)和右(rightDiv)部分。底部块(bottomDiv)与topDiv具有相同的尺寸。
这就是我的意思:
<div class="topDiv">
</div>
<div class="mainDiv">
<div class="leftDiv">
</div>
<div class="textDiv">
<? echo $myrow['maintext']; ?>
</div>
<div class="rightDiv">
</div>
</div>
<div class="bottomDiv">
</div>
问题是当我为textDiv设置以下参数时:
height: auto;
,它确认文本的大小,但是当我为leftDiv和rightDiv设置相同的参数时,它会忽略它 - 因为它中没有文本。
有没有办法让leftDiv和rightDiv的高度与textDiv的高度相同?
感谢。
答案 0 :(得分:7)
尝试更多嵌套:
<!-- (top of frame) has background on top -->
<div class="top">
<!-- (bottom of frame) has background on bottom -->
<div class="bottom">
<!-- (left of frame) has background on left, margin on top/bottom -->
<div class="left">
<!-- (right of frame) has background on right -->
<div class="right">
<!-- (content area) margin on left and right -->
<div class="content">
Hello World
</div>
</div>
</div>
</div>
</div>
它很混乱,但它会导致你框架的所有元素随着你不断增加的文字而增长。
答案 1 :(得分:0)
使用Jonathan的嵌套,应用以下CSS:
.top
{
padding-top: 10px; /*height of top image*/
background: url(top.png) top repeat-x;
}
.bottom
{
padding-bottom: 10px; /*height of bottom image*/
background: url(bottom.png) bottom repeat-x;
}
.left
{
padding-left: 10px; /*width of left image*/
background: url(left.png) left repeat-y;
}
.right
{
padding-right: 10px; /*width of right image*/
background: url(right.png) right repeat-y;
}
.content
{
width: 400px;
height: 400px;
}
你想要你的画面到底是什么样的?如果它很简单,代码可能会减少。
编辑:Jonathan更新了他的帖子来解释这个