跨度中的內嵌塊

我期望下面示例中的兩個跨度標記彼此相鄰顯示，而不是它們顯示爲一個在另一個下面。如果將類span.right的寬度設置爲49％，它們將顯示爲彼此相鄰。我無法弄清楚爲什麼右跨度被推低，就像右跨有一些不可見的填充/餘量，這使得它超過50％。我試圖在不使用html表格的情況下完成此操作。有任何想法嗎？跨度中的內嵌塊

<html> 
<head> 
    <title>Test Page</title> 
    <style type='text/css'> 
     * { 
      margin: 0; 
     } 

     html,body{ 
      margin:0; 
      padding:0; 
      height:100%; 
      width:100%; 
      border:none; 
     } 

     div.header{ 
      width:100%; 
      height:80px; 
      vertical-align:top; 
     } 

     span.left { 
      height:80px; 
      width:50%; 
      display:inline-block; 
      background-color:pink; 
     } 

     span.right { 
      vertical-align:top; 
      display:inline-block; 
      text-align:right; 
      height:80px; 
      width:50%; 
      background-color:red; 
     } 
    </style> 
</head> 
<body> 
    <div class='header'> 
     <span class='left'>Left Span 50% width</span> 
     <span class='right'>Right Span 50% width</span> 
    </div> 
</body> 
</html>

感謝您的解釋。 float：left在FF 3.1中以預期結果精美地工作。不幸的是，在IE6中，右側跨度呈現50％的50％，實際上使其寬度爲瀏覽器窗口的25％。將它的寬度設置爲100％可以達到理想的效果，但在符合標準模式的FF 3.1中已經打破，我明白這一點。得到它的工作無論是在FF和IE 6，不訴諸黑客或使用多個CSS片一直是個難題

來源

2008-08-29 rams

爲什麼要支持IE6？ http://www.ie6nomore.com/ – jrummell 2011-11-02 12:19:15

float: left;

嘗試添加到span.left

這將導致它漂浮到（如語法所示）。

我沒有以任何方式一個CSS專家，所以請不要以此爲爭的事實，但我發現，當事情是浮動的，它使得以它下面的東西垂直位置沒有區別。

如果你將span.right右移，然後在它們下面添加文本，你應該得到一些有趣的結果，停止這些「有趣的結果」，你可以使用「clear：left/right/both」這將導致塊有清晰的風格，在任何東西都浮在左/右/兩個。 W3Schools也有這個屬性的頁面。

並歡迎來到Stackoverflow。

來源

2008-08-29 16:14:25 Teifion

感謝您快速回答添加浮點數：left確實使得2個spans呈現相鄰。但是我不明白爲什麼跨度沒有浮動而被推下去。推什麼？ – rams 2008-08-29 16:20:49

我不喜歡這個技巧，但它似乎做的工作都在Firefox和IE6：

span.right { 
    vertical-align:top; 
    display:inline-block; 
    text-align:right; 
    height:80px; 
    width:50%; 
    *width:100%; 
    background-color:red; 
}

注意這似乎滿足IE6的要求，是由火狐忽略*width: 100%。

來源

2008-08-29 17:50:18 rams

這是因爲內聯和內聯塊包含元素之間的空白（在你的情況下是換行符）。在你的情況下，元素的組合寬度是50％+ 50％+空白> 100％。

你應該要麼把在同一行的兩個元素在HTML文檔中（不含空格）

<div class='header'> 
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span> 
</div>

或者使用HTML註釋

<div class='header'> 
     <span class='left'>Left Span 50% width</span><!-- 
    --><span class='right'>Right Span 50% width</span> 
</div>

我本人更喜歡後者。

來源

2013-04-24 11:45:47 eba

跨度中的內嵌塊

回答

相關問題