如何製作三個邊框？

對不起，如果我的問題聽起來很愚蠢，我試圖學習asp.net。如何製作三個邊框？

不管怎樣，我的問題是，如何讓三個斷點，這樣的：

，你可以看到邊框是在非常左/右和標誌（圖）是在中心和休息的網站沒有邊界，沒有任何東西。只是正常的HTML。

我設法做了一些像邊框一樣的邊框我通過查看w3schools的例子給出了一些邊框，但是我不知道我是否做得對，還有當我做出最後一個邊框時（右邊的那個）似乎是在logo之後出現的，而不是堅持網頁的最右側。

2011-07-31 4box

Absolutely position在左側和右側的框，然後設置左，上匹配的側箱的寬度是中間區域右頁邊距。例如：

<div class="header"> 
    <div class="left"> 
     <img src="http://placekitten.com/50/50"> 
    </div> 
    <div class="middle">Pancakes</div> 
    <div class="right"> 
     <img src="http://placekitten.com/50/50"> 
    </div> 
</div>

而CSS：

.header { 
    position: relative; /* Needed for the position:absolute to work properly */ 
} 
.left { 
    position: absolute; 
    border: 1px solid red; 
    width: 50px; 
    height: 50px; 
    top: 0; 
    left: 0; 
} 
.middle { 
    text-align: center; 
    margin: 0 50px; 
}  
.right { 
    position: absolute; 
    border: 1px solid red; 
    width: 50px; 
    height: 50px; 
    top: 0; 
    right: 0; 
}

和現場版本：http://jsfiddle.net/ambiguous/TNzn9/

另外，請從W3Schools的，他們will lead you astray望而卻步。

來源

2011-07-31 09:17:59

好的，謝謝。看起來像我想要的。關於w3schools，我不明白爲什麼我會離開，但因爲有超過30k代表的用戶說，我會的。我想我應該搞清楚爲什麼要快點 – 4box

@ 4box：不要太相信權威。 W3S提供了大量不完整和誤導性的信息，它們與真正的W3完全沒有任何關係，它們只是試圖通過Google的排名系統等來銷售無用的認證。閱讀更多信息，請訪問[w3fools]（http：// w3fools.com/）。 [CSS-Tricks]（http://css-tricks.com/），[Quirksmode]（http://www.quirksmode.org/）和[A List Apart]（http://www.alistapart.com） /）是更好的開始尋找東西的地方。然後是[W3]的真實標準（http://w3.org/）。 –

我明白了。無論如何，再次感謝你。願原力與你同在。 – 4box

-1

<div style="float:left;border:3px solid black;width:50px;height:50px;"></div> 
    <div style="float:left;"><h1>LOGO</h1></div> 
    <div style="float:left;border:3px solid black;width:50px;height:50px;"></div> 
    <div style="clear:both"> 
The REST 
</div>

來源

2011-07-31 09:12:07 fatnjazzy

將內聯樣式轉移到css文件 – Janez

@Janez - 當然，我不打算編寫他的工作 – fatnjazzy

sry因爲評論不好，我對4box說。我的評論應該是：「@fbox：另外將內聯樣式移動到css文件中:) :) – Janez

如何製作三個邊框？

回答

相關問題