我在显示以下代码时遇到了麻烦。我担心将<div class="contectCode">
分为两个<div class="left">
和<div class="right">
。因此,有些开关应该显示在左侧,有些则显示在右侧。
<?php
$xml = simplexml_load_file("Profiles.xml");
foreach($xml->children() as $Developer){
echo '<div class="contectCode" style="height: 260px;">';
echo '<div class="left" style="width:365px;">';
echo '<b>' . $Developer['name'] . '</b>';
echo '</div><br/>';
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
echo '<p><b><i>Communications with you</i></b></p>';
echo '</div>';
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
echo '<p><b><i>Communications with other developers </i></b></p>';
echo '</div>';
foreach($Developer->children() as $factor){
switch ($factor->getName()){
case "trust":
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>You have selected (trusted) him to help you ' . $factor . ' times</p><br/>';
else
echo '<p>You have selected (trusted) her to help you ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "response":
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He hes responded to your help request ' . $factor . ' times</p><br/>';
else
echo '<p>She has responded to your help request ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "indegreeOutdegree":
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has helped you to complete your code ' . $factor . ' times</p><br/>';
else
echo '<p>She has helped you to complete your code ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "recommended":
echo '<div class="left" style="width:365px; float:left; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has been recommended to you by others ' . $factor . ' times</p><br/>';
else
echo '<p>She has been recommended to you by others ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "trustG":
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has been selected (trusted) by others ' . $factor . ' times</p><br/>';
else
echo '<p>She has been selected (trusted) by others ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "responseG":
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has responded to others requests ' . $factor . ' times</p><br/>';
else
echo '<p>She has responded to others requests ' . $factor . ' times </p><br/>';
echo '</div>';
break;
case "indegreeOutdegreeG":
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has helped other developers ' . $factor . ' times</p><br/>';
else
echo '<p>She has helped other developers ' . $factor . ' times</p><br/>';
echo '</div>';
break;
case "recommendedG":
echo '<div class="right" style="width:365px; float:right; text-align:left;">';
if($Developer['gender'] == "Male")
echo '<p>He has been recommended to help by others ' . $factor . ' times</p><br/>';
else
echo '<p>She has been recommended to help by others ' . $factor . ' times</p><br/>';
echo '</div>';
break;
}
}
echo '</div>';
}
?>
如果输出显示左侧和右侧div的情况,则效果很好。但是,如果输出显示右侧div中的情况,则将它们向左移动。我想在右边而不是在右边显示它们。
那么,我该怎么做?
CSS
.contectCode
{
font-size:15px;
line-height:24px;
margin-left:13px;
margin-right:13px;
border-style:solid;
border-width:2px;
border-color:#000066;
padding:10px;
margin-top:5px;
margin-bottom:10px;
}
.left
{
float:left;
width:60%;
}
.right
{
float:left;
}
答案 0 :(得分:1)
怎么样:
.right
{
float:left;
text-align:right;
}
答案 1 :(得分:0)
Ghadeer - 我可能会在你的帖子中遗漏一些东西,但是我把你的两个HTML样本和你的CSS都扔进了一个带有附加渲染的快速页面(在Chrome v24中,用颜色来显示布局)。在两个HTML示例中,由于内联样式中的text-align:left
,右侧div中的文本与div的左侧对齐。
如果右对齐文字符合您的要求,请考虑在text-align:right
CSS选择器中添加.right
,并从<div class="right">...</div>
元素中删除内联样式。
无论如何,更容易维持这种方式!
另一方面,考虑到您逐字生成HTML,为什么首先要有任何内联样式?看起来这些样式会更适合放在样式表中。