2010-11-02 68 views
1

这应该很简单,它只是另一个div标签中的三个div标签。三个div标签应该排成一排。相反,他们是垂直排列的。我所做的任何事似乎都无法解决它。为什么不能正确使用css这个位置?

<head> 
<link href="css.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<?php 

function NameChange($num) { 

$card = $_POST["state".$num]; 
$spaces = " "; 
$underscore = "_"; 
$imagename = str_replace($spaces, $underscore, $card); 

return $imagename; 
} 

?> 




<div id="main"> 
<div id="3c1"> 
<?php 
echo '<script type="text/javascript"> 
function myPopup1() { 
window.open("images/'.NameChange(1).'.jpg", "myWindow", 
"status = 1, height = 691, width = 468, resizable = 0") 
} 
</script>'; 

echo '<script type="text/javascript"> 
function myPopup2() { 
window.open("images/'.NameChange(2).'.jpg", "myWindow", 
"status = 1, height = 691, width = 468, resizable = 0") 
} 
</script>'; 

echo '<script type="text/javascript"> 
function myPopup3() { 
window.open("images/'.NameChange(3).'.jpg", "myWindow", 
"status = 1, height = 691, width = 468, resizable = 0") 
} 
</script>'; 



echo '<img src=images/'.NameChange(1).'_tn.jpg />'; 
echo "<br />"; 
echo '<input type="button" onClick="myPopup1()" value="Image">'; 
echo '<script type="text/javascript"> 
function myPopup1t() { 
window.open("/'.$_POST[state1].'.html", "myWindow", 
"status = 1, height = 691, width = 468, resizable = 0") 
} 
</script>'; 
echo '<input type="button" onClick="myPopup1t()" value="Meaning">'; 
?> 
</div> 

<div id="3c2"> 
<?php 
echo '<img src=images/'.NameChange(2).'_tn.jpg />'; 
echo "<br />"; 
echo '<input type="button" onClick="myPopup2()" value="Image">'; 
echo '<script type="text/javascript"> 
function myPopup2t() { 
window.open("/'.$_POST[state2].'.html", "myWindow", 
"status = 1, height = 691, width = 468, resizable = 0") 
} 
</script>'; 
echo '<input type="button" onClick="myPopup2t()" value="Meaning">'; 
?> 
</div> 

<div id="3c3"> 
<?php 
echo '<img src=images/'.NameChange(3).'_tn.jpg />'; 
echo "<br />"; 
echo '<input type="button" onClick="myPopup3()" value="Image">'; 
echo '<script type="text/javascript"> 
function myPopup3t() { 
window.open("/'.$_POST[state3].'.html", "myWindow", 
"status = 1, height = 691, width = 468, resizable = 0") 
} 
</script>'; 
echo '<input type="button" onClick="myPopup3t()" value="Meaning">'; 
?> 
</div> 
</div> 
</body> 

而CSS

#main { 
    width: 808px; 
    margin-right: auto; 
    margin-left: auto; 
    left: auto; 
    right: auto; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
} 
#main #3c1 { 
    height: 200px; 
    width: 200px; 
    display: inline; 
} 
#main #3c2 { 
    height: 200px; 
    width: 200px; 
    display: inline; 
} 
#main #3c3 { 
    height: 200px; 
    width: 200px; 
    display: inline; 
} 

回答

1

该ID不能以数字开头。内联元素无法设置高度和宽度(以及其他属性)。为此,请使用display:inline-block。如果所有3个div都具有完全相同的CSS规则,也可以使用单个类。

3

如果显示:内联是不是做正确的事的东西,你可以浮动的div。

<div> 
    <div style="float:left">stuff</div> 
    <div style="float:left">stuff</div> 
    <div style="float:left">stuff</div> 
    <br style="clear:both;"/> 
</div> 
+0

他在问题中说他连续想要他们,但是他们在一列中。 – 2010-11-02 03:13:02

+0

我的不好,我误解了这个问题。 – s84 2010-11-02 03:14:16

+0

Float不起作用 – Expecto 2010-11-02 03:17:41

0

最好和最简单的方法 - 用户Firebug结合Firefox和编辑/调整使用Firebug的样式。这会给你动态的预览,你会立即得到正确的样式。

同意迈克尔的回应,但关于ID的数字开始。你应该修复并检查结果。

相关问题