无表或无表：带自定义边角的Html扩展框

我遇到了使用DIV来为我的网站设置内容框样式的问题。它基本如下所示：无表或无表：带自定义边角的Html扩展框

 
      container 
+--------------------------+ 
|+--+------------------+--+| 
||c1|  r1  |c2|| 
|+--+------------------+--+| 
|| |     | || 
|| |     | || 
||r4|  content  |r2|| 
|| |     | || 
|| |     | || 
|+--+------------------+--+| 
||c4|  r3  |c3|| 
|+--+------------------+--+| 
+--------------------------+

r1，r2，r3和r4的宽度/高度未知。它们都有1px（高或宽）渐变，在背景中重复。

角落有5x5px pngs（圆形，透明背景）。

问题是我不知道内容的宽度或高度，因此不知道r1到r4的宽度或高度。是不是真的有在CSS一个跟你说：

r1 {width: container.width - 2x5px};

我知道这可能与JavaScript来完成，但我想避免这种情况。

在这种情况下使用表格不是更简单吗？它看起来像一张桌子:)

来源

2009-07-27 Ropstah

使梯度宽/比单个像素高。有些浏览器有这个问题，最近我观察到的是IE8 ... – Guffa 2009-07-27 23:10:50

不，这不是真正的问题。请在表格中回答我的意见 - 答案... – Ropstah 2009-07-28 12:58:16

对我来说也是一张桌子。我相信我会被标榜为异端，但有时使用表格比使用css更容易。

<table> 
     <tr> 
      <td id=container> 
      <table> 
       <tr> 
        <td id=c1></td> 
        <td id=r1></td> 
        <td id=c2></td> 
       </tr> 
       <tr> 
        <td id=r4></td> 
        <td id=content></td> 
        <td id=r2></td> 
       </tr> 
       <tr> 
        <td id=c4></td> 
        <td id=r3></td> 
        <td id=c3></td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
    </table>

来源

2009-07-27 23:19:34

bllllllllllllllleeeeeeeeeeeechhhhhhhhhhhhh – Jason 2009-07-27 23:27:15

我知道，我知道。不要让我受到伤害...... – 2009-07-27 23:28:53

这真的很容易，还是只是你更习惯了？ – Guffa 2009-07-27 23:40:51

不，这可以通过标准的CSS来实现。如果你没有设置宽度或高度，它们会自然形成。高度由内容的长度决定，宽度（如果未指定）将填充它所在容器的宽度。如果容器的宽度是整个页面，则它将占用整个页面。。

好像实现你要找的内容，你可以这样做：

<div class="container"> 
    <div class="outer-wrap"> 
    <div class="inner-wrap"> 
     <div class="content"> 
     <p>Content here</p> 
     </div> 
    </div> 
    </div> 
</div>

虽然我通常不会宽恕使用非语义代码膨胀，如这一点，一定会完成工作。您可以将角落设置为CSS中各个div的背景图像。

来源

2009-07-27 23:07:47 Jason

r1，r2 r3和r4中的内容如何？那去哪里？ – 2009-07-27 23:29:47

那里没有内容...这些都是设计元素，或者我想。如果他需要那里的内容，那么他有一些设计问题，我相信.... – Jason 2009-07-27 23:47:56

拜伦是正确的，需要一个横跨行（r1到r4）的整个宽度或高度的背景图像...并且那些不能在任何一个角落下/因为那些有透明圆角... – Ropstah 2009-07-28 12:56:19

R4固定（5像素），内容液体，R2固定（固定）

看看这个工具可以提供帮助。

http://www.pagecolumn.com/liquidfixed/3_col_fix-liquid-fix.htm

来源

2009-12-08 16:04:56 unigg

我迅速做了CSS的解决方案：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>CSS borders</title> 
<style> 


* { 
margin:0; 
padding:0; 
} 

#container 
{ 
    width:20%; 
} 

#head 
{ 
    background-image:url(images/rounded_01.png); 
    background-position:left top; 
    background-repeat:no-repeat; 
    height:14px; 
    width:14px; 
    width:100%; 
} 

#head-mid 
{ 
    background-image:url(images/rounded_02.png); 
    height:14px; 
    margin-left:14px; 
    margin-right:14px; 
} 

#head-right 
{ 
    background-image:url(images/rounded_03.png); 
    background-position:right top; 
    background-repeat:no-repeat; 
    height:14px; 
    width:100%; 
} 

#content 
{ 
    background-image:url(images/contentleft.png); 
    background-position:left top; 
    background-repeat:repeat-y; 
    height:14px; 
    width:14px; 
    width:100%; 
} 

#content-mid 
{ 
    background-image:url(images/content.png); 
    height:14px; 
    margin-left:14px; 
    margin-right:14px; 
} 

#content-right 
{ 
    background-image:url(images/contentright.png); 
    background-position:right top; 
    background-repeat:repeat-y; 
    width:100%; 
} 

#bottom 
{ 
    background-image:url(images/rounded_07.png); 
    background-position:left top; 
    background-repeat:no-repeat; 
    height:14px; 
    width:14px; 
    width:100%; 
} 

#bottom-mid 
{ 
    background-image:url(images/rounded_08.png); 
    height:14px; 
    margin-left:14px; 
    margin-right:14px; 
} 

#bottom-right 
{ 
    background-image:url(images/rounded_09.png); 
    background-position:right top; 
    background-repeat:no-repeat; 
    height:14px; 
    width:100%; 
} 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="head"> 
       <div id="head-right"> 
        <div id="head-mid"> 
        </div> 
       </div> 
     </div> 
     <div id="content"> 
       <div id="content-right"> 
        <div id="content-mid"> 
        <p>content here... will auto expand and resize</p> 
        </div> 
       </div> 
     </div> 
     <div id="bottom"> 
       <div id="bottom-right"> 
        <div id="bottom-mid"> 
        </div> 
       </div> 
     </div> 

    </div> 
</body> 
</html>

所有文件（图像和PSD）：http://www.mediafire.com/file/zmemlw0tyyv/css.rar

来源

2009-12-08 17:09:05 DaMacc

这是很多代码输出。 – Rimian 2010-02-26 12:57:19

可以优化CSS，我只是为了清晰起见而采用了这种方式。 – DaMacc 2010-02-27 13:14:41

无表或无表：带自定义边角的Html扩展框

回答

相关问题