Pourquoi ne pas utiliser correctement cette position avec css?

Cela devrait être simple, c'est juste trois balises div à l'intérieur d'une autre balise div. Les trois balises div devraient juste s'aligner dans une rangée. Au lieu de cela, ils sont alignés verticalement. Rien de ce que je fais ne semble le réparer.Pourquoi ne pas utiliser correctement cette position avec 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>

Et le 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; 
}

Source

2010-11-02 Expecto

Les ID ne peuvent pas commencer par des nombres. Vous ne pouvez pas définir la hauteur et la largeur (entre autres attributs) sur les éléments en ligne. Utilisez display:inline-block pour cela. Utilisez également une seule classe si les 3 divs ont exactement les mêmes règles CSS.

Source

2010-11-02 07:09:34 Michael

Si l'affichage: en ligne ne fait pas la bonne chose chose que vous pouvez faire flotter les divs.

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

Source

2010-11-02 03:10:28 s84

Il a dit dans la question qu'il les voulait dans une rangée, mais ils sont dans une colonne à la place. –

mon mauvais, j'ai mal lu la question. – s84

Float ne fonctionne pas non plus – Expecto

Meilleure et plus facile approche - Utilisateur Firebug en conjonction avec Firefox et modifier/ajuster le style en utilisant Firebug. Cela vous donnera un aperçu dynamique et vous obtiendrez le style correct en un rien de temps.

D'accord avec la réponse de Michael mais concernant ID commençant par des nombres. Vous devriez corriger cela et vérifier les résultats.

Source

2010-11-02 10:52:14

Pourquoi ne pas utiliser correctement cette position avec css?

Répondre

Questions connexes