Question

这应该很简单，它只是另一个div标签内的三个div标签。三个div标签应该排成一排。相反，它们是垂直排列的。我所做的一切似乎都无法解决。

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

Answer 1

如果显示：内联没有做正确的事情，你可以浮动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>

Answer 2

id不能以数字开头。您不能在内联元素上设置高度和宽度（以及其他属性）。请使用display:inline-block。如果所有3个div都具有完全相同的CSS规则，也可以使用单个类。

Answer 3

最佳和最简单的方法 - 用户 Firebug 与Firefox一起使用Firebug编辑/调整样式。这将为您提供动态预览，您将立即获得正确的样式。

同意迈克尔的回应，虽然关于ID从数字开始。你应该解决这个问题并查看结果。

为什么这个位置不能正确使用css？

3 个答案: