2010-11-02 70 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的數字開始。你應該修復並檢查結果。

相關問題