Question

HTML元素重叠，因为它们具有相同的ID。他们需要并排放置一个水平对齐的空间，但他们不会。

Here是显示问题的图片。

我试图让从数据库中拉出来的HTML元素并排排列。

///////////php code

<?php
//connect to server
$connect = mysql_connect("localhost","root","");    

//connect to database
mysql_select_db("website");    

//query the database
$query = mysql_query("SELECT * FROM products");

//fetch results of database and convert to an array
echo "<div id='productClass1'>";
while($rows = mysql_fetch_array($query)):
//
    echo "<img id='pClassImage' src='{$rows['image']}' />";
    echo "<div id='pClassDesk'>" . "<p>" . $rows['description'] . "</p>" . "</div>";
    echo "<div id='pClassPrice'>"."£{$rows['price']}"."</div>";
//
endwhile;
echo "<div>";

?>

///////////////////

 <?php
//home page products//////////////////////////////////////////////////////////////////
$d1 = 'This is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the description';
$pimg1 = 'src="Images/placeholder1.jpg"';

$d2 = 'This is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the description'; 
$pimg2 = 'src="Images/placeholder1.jpg"';

$d3 = 'This is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the description'; 
$pimg3 = 'src="Images/placeholder1.jpg"';

$d4 = 'This is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the descriptionThis is the description';  
$pimg4 = 'src="Images/placeholder1.jpg"';
///////////////////////////////////////////////////////////////////////////////////////

$scroller = 'Scrolling newsfeed will stop when hover over, newsfeed goes here.';

 ?>

<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
        <!-- Start css3menu.com HEAD section -->
    <link rel="stylesheet" href="website menu 1_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
    <!-- End css3menu.com HEAD section -->
</head>



<body>


<div id="header">      
  <img src="images/headerplaceholder.jpg" id="headerImage">
  <div id="menu">
<?php include'menu.php' ?>
  </div>      

  <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();"><?php echo $scroller; ?></marquee>

  </div>

  <div id="sideMenu">
  <a class="twitter-timeline" href="https://twitter.com/kaanmote" data-widget-id="489945810751062016">Tweets by @kaanmote</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

  </div>

 <div id="productsP">

        <?php include 'database.php'; ?>
</div>
  <!--<Footer id="footer">
  <p>Footer copyright information goes here.</p>
  </Footer>
  -->
</body>
  </html>

#productsP{
float:left;
width:74%;
height:auto;
padding:10px;
margin-top:30px;
margin-left:5px;
}
#productClass1{
height:50%;
width:25%;
-webkit-box-shadow: 3px 3px 3px 3px #2B2F38;
box-shadow: 3px 3px 3px 3px #2B2F38;
float:left;
padding:5px;
margin:10px;
display:list-item;
}
#pClassImage,#pClassImage2,#pClassImage3,#pClassImage4,#pClassImage5,#pClassImage6{
border:1px solid #7E8A7D;
height:50%;
width:94%;
padding:5px;
margin:1px;

}
#pClassDesk p,#pClassDesk2 p,#pClassDesk3 p,#pClassDesk4 p,#pClassDesk5 p,#pClassDesk6 p{
border:1px solid #7E8A7D;
height:30%;
padding:5px;
margin: 1px;
overflow:hidden;
}
#pClassPrice,#pClassPrice2,#pClassPrice3,#pClassPrice4,#pClassPrice5,#pClassPrice6{
border:1px solid #7E8A7D;
float:right;
height:5%;
padding:5px;
margin: 1px;
}

Answer 1

除了脚本中的echo语句外，PHP和SQL不会影响html或css。

HTML和CSS只是描述文档的方法，我首先要链接到外部样式表http://www.w3schools.com/css/css_howto.asp

或者将您的CSS包装在<style></style>代码中。

至于水平并排对齐，我会在回显HTML

之前添加它

echo '<div class="someClass">';

，这是在回显HTML之后

echo '</div>';

然后在你的CSS中

    .someClass {
        float: left;
    }

这应该让你去你想去的地方。 float属性仅指定推送元素（HTML标记+子项）的位置。

我会花一两个小时阅读一些HTML和CSS快速开始清理混乱。

在sql中显示错误的产品

1 个答案: