無表或無表：帶自定義邊角的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擴展框

回答

相關問題