Question

我的问题是，为什么浮动离开不符合这些规范当我使用它们时，所有结果只显示在单个div上，而其他7个显示在该div下同一个地方所以请告诉我这个问题的解决方案是什么

<div class="tv_l" style="top:1465px;
left:10px;

position:absolute;

width:1690px;
height:10px;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;">

<hr>
</div>


<?php

$link = mysqli_connect("localhost" , "***" ,"***" , "***");
if (mysqli_connect_errno()) {
echo mysqli_connect_error();
 exit();
} else {
    echo "";
}
?>
<?php
$result = mysqli_query($link, "SELECT * FROM **** ORDER BY RAND()
LIMIT 8" )
or die(mysqli_error());
while($row = mysqli_fetch_array( $result )){
?>;



<div class="son_s_p" style="top:1957px;
left:12px;
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .25);
position:inherit;
background:white;
width:190px;
height:240px;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;
text-align:center;
float:left;

">



 <img src="../lu/music/tumb/<?php echo $row['img']; ?>"style="width:198px; height:148px;"  >
<br>

 <?php echo $row['name']; ?><br><br>

 <div id="son_s_p" style="top:218px;
left:px;

position:absolute;


border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;
text-align:justify;">


&nbsp;<?php echo $row['time']; ?> &nbsp; &nbsp;<span class="time&amp;type" style="top;10px;"><?php echo $row['type']; ?></span> 

</div>
</div>

<?php
}
?>

with using position

without using position data will go top and top do not work

Answer 1

你错了，你放入了div＆＃34; float：left;＆＃34;那就错了。你应该把它放在它的样式属性之前，它是Style="float: left;"

正确的代码是：

<div class="tv_l" style="top:1465px;
left:10px;

position:absolute;

width:1690px;
height:10px;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;">

<hr>
</div>


<?php

$link = mysqli_connect("localhost" , "***" ,"***" , "***");
if (mysqli_connect_errno()) {
echo mysqli_connect_error();
 exit();
} else {
    echo "";
}
?>
<?php
$result = mysqli_query($link, "SELECT * FROM **** ORDER BY RAND()
LIMIT 8" )
or die(mysqli_error());
while($row = mysqli_fetch_array( $result )){
?>;



<div class="son_s_p" style="top:1957px;
left:12px;
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .25);
position:inherit;
background:white;
width:190px;
height:240px;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;
text-align:center;
float:left;

">



 <img src="../lu/music/tumb/<?php echo $row['img']; ?>"style="width:198px; height:148px;"  >
<br>

 <?php echo $row['name']; ?><br><br>

 <div id="son_s_p" style="top:218px;
left:px;

position:absolute;


border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;
text-align:justify;">


&nbsp;<?php echo $row['time']; ?> &nbsp; &nbsp;<span class="time&amp;type" style="top;10px;"><?php echo $row['type']; ?></span> 

</div>
</div>

<?php
}
?>

Answer 2

您的问题不明确，但我已清理您的代码，以便div .tv_l位于div .son_s_p的左侧及其内容：

.tv_l {
  border-radius: 3px/3px;
  padding-right: 10px;
  border-left: 10px;
  border: 1px solid;
  float: left;
}

.son_s_p {
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  background: white;
  width: 190px;
  height: 240px;
  border-radius: 3px/3px;
  padding-right: 10px;
  border-left: 10px;
  text-align: center;
  float: left;
}

#son_s_p {
  border-radius: 3px/3px;
  padding-right: 10px;
  padding-top: px;
  border-left: 10px;
  text-align: justify;
}

<div class="tv_l">
   <hr>
</div>

<?php
$link = mysqli_connect("localhost" , "***" ,"***" , "***");
if (mysqli_connect_errno()) {
   echo mysqli_connect_error();
   exit();
}else{
   echo "";
}

$result = mysqli_query($link, "SELECT * FROM **** ORDER BY RAND()
LIMIT 8")
or die(mysqli_error());
while($row = mysqli_fetch_array( $result )){
?>

<div class="son_s_p">
   <img src="../lu/music/tumb/<?php echo $row['img']; ?>" style="width:198px; height:148px;">
   <br>
   <?php echo $row['name']; ?>
   <br>
   <br>
   <div id="son_s_p">
      <?php echo $row['time']; ?>
      <span class="time&amp;type" style="top;10px;"><?php echo $row['type']; ?></span>
   </div>
</div>

<?php } ?>

Answer 3

看起来你在DIV上使用绝对定位。浮动不能那样工作。请改用：

position: static; 
float: left;

如果我是你，我会首先尝试使用纯HTML和CSS以及一些虚拟数据，然后将其连接到数据库。

以下是一个如何使用div实现浮动的示例，与您的方法形成对比：

https://jsfiddle.net/19zrr99n/

为什么它向左浮动不起作用和这些代码

3 个答案: