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

【问题标题】：Why wont this position properly using css?为什么不能正确使用 css 这个位置？
【发布时间】：2010-11-02 18:52:14
【问题描述】：

这应该很简单，它只是另一个 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;
}

【问题讨论】：

标签： php html css

【解决方案1】：

如果 display:inline 没有做正确的事情，你可以浮动 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>

【讨论】：

他在问题中说他希望它们在一行中，但它们却在一列中。
进行完整性检查 - 为 CSS 中的 div 分配颜色并确保您的样式表实际应用正确。
是的，听起来你没有附加样式表
附带说明，您的 myPopup() 函数是多余的 - 只需编写一个通用函数，然后传入您要打开的 url。
这很奇怪..如果我更改主 div 更改工作。任何其他 div 都不起作用。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：