正確的方法有兩列，一個浮動左邊和一個浮動右邊

我一直在網絡和Xpages編程中遇到這種困難。正確的方法有兩列，一個浮動左邊和一個浮動右邊

我想要一個響應的容器和一個兩列的表。在左欄中，我希望我的標籤或字段左對齊並右對齊。

我相信我不應該使用表格，但divs。

我已經試過代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> 
<head> 
<title>test</title> 
<style type="text/css"> 


.container { 
width: auto; 
} 

.left { 
float:left; 
} 

.right { 
float:right;  
} 

.line { 
display:inline; 
} 

</style> 
</head> 
<div class = "container"> 

<div class = "line"><p class="left">Label 1</p><p class = "right">Value 1</div> 

<div class = "line">Label 2</div> 
<div> 

</body> 
</html>

任何幫助將不勝感激！

來源

2014-06-19 Bryan Schmiedeler

請記住Internet Explorer兼容模式（可強制爲內部站點使用）忽略浮動。 –

我幾乎總是喜歡設置了兩個集裝箱<div>和設置他們兩個

display: inline-block;

所以你的例子是這樣的：

.line{ display:inline-block;width:50%;} /* or 48% depending if there are margins etc.

來源

2014-06-19 14:57:34

既然你正試圖創建撞了兩列相互抵觸，你不需要你的「正確」的風格浮動：正確。您實際上希望它浮動：左邊，以便它在您的左列旁邊內聯。

此外，您的容器div沒有結束標記，並且右列p標記未關閉。與第一行中的p標籤相反，Label2位於div中。

浮動對象時，通常需要「清除」它們。我已將您的代碼和修改用於演示我認爲您正在嘗試實現的內容：

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
<style type="text/css"> 


.container { 
width: auto; 
padding:10px; 
background:#eee; 
} 

.left { 
float:left; 
width:45%; 
} 

.right { 
float:left; 
width:45%; 
} 
.clear { 
    clear:both; 
} 

.line { 
border:1px solid #000; 
margin:10px 0; 
background:#fff; 
} 

</style> 

<div class = "container"> 

    <div class = "line"> 
     <p class="left">Label 1</p> 
     <p class = "right">Value 1</p> 
     <div class="clear"></div> 
    </div> 

    <div class = "line"> 
     <p class="left">Label 2</p> 
     <p class = "right">Value 2</p> 
     <div class="clear"></div> 
    </div> 
</div> 
</xp:view>

來源

2014-06-19 21:17:49

正確的方法有兩列，一個浮動左邊和一個浮動右邊

回答

相關問題