Php 在sql中不正确地显示产品_Php_Html_Css_Sql_Web

Php 在sql中不正确地显示产品

php html css sql web

Php 在sql中不正确地显示产品,php,html,css,sql,web,Php,Html,Css,Sql,Web,HTML元素重叠是因为它们具有相同的ID。它们需要与水平对齐的空格并排，但它们没有是显示问题的图像我试图让从数据库中取出的HTML元素并排对齐 ///////////php code <?php //connect to server $connect = mysql_connect("localhost","root",""); //connect to database mysql_select_db("website"); //query the datab

HTML元素重叠是因为它们具有相同的ID。它们需要与水平对齐的空格并排，但它们没有

是显示问题的图像

我试图让从数据库中取出的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;
}

//php代码
家
.css3m{显示：无}
!函数（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）；}（文档，“脚本”，“twitter wjs”）；
#产品{
浮动：左；
宽度：74%；
高度：自动；
填充：10px；
边缘顶部：30px；
左边距：5px；
}
#产品类别1{
身高：50%；
宽度：25%；
-网络工具包盒阴影：3px 3px 3px 2B2F38；
盒影：3px 3px 3px#2B2F38；
浮动：左；
填充物：5px；
利润率：10px；
显示：列表项；
}
#pClassImage、#pClassImage2、#pClassImage3、#pClassImage4、#pClassImage5、#pClassImage6{
边框：1px实心#7E8A7D；
身高：50%；
宽度：94%；
填充物：5px；
保证金：1px；
}
#pClassDesk p、#pClassDesk 2 p、#pClassDesk 3 p、#pClassDesk 4 p、#pClassDesk 5 p、#pClassDesk 6 p{
边框：1px实心#7E8A7D；
身高：30%；
填充物：5px；
保证金：1px；
溢出：隐藏；
}
#pClassPrice、#pClassPrice 2、#pClassPrice 3、#pClassPrice 4、#pClassPrice 5、#pClassPrice 6{
边框：1px实心#7E8A7D；
浮动：对；
身高：5%；
填充物：5px；
保证金：1px；
}

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

HTML和CSS只是描述文档的方式，我将从链接到外部样式表开始

或者将CSS包装在

标记中

至于将它们并排水平对齐，我会在您回显HTML之前添加这个

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

这会让你去你想去的地方。

float

属性只指定将元素（HTML标记+子元素）推送到何处

我会花一两个小时阅读一些HTML和CSS快速入门，以消除混淆。

我不理解你的问题，而且必须阅读大量不必要的代码（我很确定你的CSS与SQL问题无关）也无助于他们忘记这一点，如果要多次使用同一属性值，则如果要使用同一属性值，则该产品框与从sqlUse中提取的其他产品框不对齐。在DOM中，

id

属性必须是唯一的。php用于处理数据。。你的问题是关于设计，其中一个CSST仍然不起作用，我将所有ID都更改为类

echo '</div>';

    .someClass {
        float: left;
    }