Question

我在网络和Xpages编程方面一直在努力解决这个问题。

我想要一个响应的容器，以及一个包含两列的表。在左栏中，我希望我的标签或字段向左齐平，在右侧向右齐平。

我相信我不应该使用表格，而是使用div。

我尝试过的代码如下：

<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>

非常感谢任何帮助！

Answer 1

我几乎总是喜欢设置两个容器<div>并将它们都设置为

   display: inline-block;

所以你的例子就像：

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

Answer 2

由于您正在尝试创建两个相互碰撞的列，因此您不需要“正确”的样式来浮动：右键。你实际上希望它浮动：向左移动，使它在你的左列旁边内嵌。

此外，您的容器div没有结束标记，并且您的右列p标记未关闭。 Label2在div中，与第一行中的p标签相对。

当您浮动对象时，通常需要“清除”它们。我已经接受了你的代码并进行了修改，以展示我认为你想要实现的目标：

<?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>

正确的方法有两列，一个浮动，一个浮动

2 个答案: