Question

我目前无法正确定位我的图片和标签并将它们并排排列在这里是我的html / php代码：

<?php
//If the user is logged in
$getposts = mysqli_query($conn,"SELECT * FROM posts WHERE user_posted_to='$user' ORDER BY id DESC LIMIT 10") or die(mysql_error());
while ($row = mysqli_fetch_array($getposts,MYSQLI_ASSOC)) {
                        $id = $row['id'];
                        $body = $row['body'];   
                        $date_added = $row['date_added'];
                        $added_by = $row['added_by'];
                        $user_posted_to = $row['user_posted_to'];  
     echo "
     <article class='post'>
     <div class='post-content'>
<div class='content'>
<img src='https://d324imu86q1bqn.cloudfront.net/uploads/user/avatar/46407/ello-large-a74c9662.png' id='post_photo' alt=''></img>
<p>$body</p>
</div>
</div></article>
     ";
     }
?>

我正在使用这个css代码：

.post-content {
    display: block;
    word-wrap: break-word;
}
#read {
    font-size:0.85rem;
    line-height:1.5;
}
#post_photo{
    border-radius: 256px;
    width: 130px; height: 130px;
    float: left;
    overflow:hidden;
}

但是图像没有与p标签对齐，并且在左侧和右侧p标签中正确显示，两者之间有一些间隙。

Answer 1

制作图片和文字display: table-cell和vertical-align: middle。对内容display: table进行操作，并从图片样式中删除float: left;。

此外，您没有正确关闭img代码。

工作代码段：

＆＃13;

.post-content {
  display: block;
  word-wrap: break-word;
}

#read {
  font-size:0.85rem;
  line-height:1.5;
}

#post_photo{
  border-radius: 256px;
  width: 130px; height: 130px;
  /*float: left;*/
  overflow:hidden;
}

/***** NEW STYLES BELOW *****/

.content{
  display: table;
}

#post_photo, .content > p{
  display: table-cell;
  vertical-align: middle;
}

.content > p{
  padding-left: 20px;
}

＆＃13;

<article class='post'>
  <div class='post-content'>
    <div class='content'>
      <img src='https://d324imu86q1bqn.cloudfront.net/uploads/user/avatar/46407/ello-large-a74c9662.png' id='post_photo' alt='' /> <!-- img tags are self closing tags -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit mauris ac pellentesque ultricies. Quisque gravida bibendum justo non sodales. In tortor sapien, elementum quis tincidunt ac, pellentesque nec nunc. Fusce lacinia mollis mauris, sit amet mattis nibh ultrices id. Curabitur eleifend metus massa, vitae accumsan tellus commodo ut. Proin odio nunc, volutpat nec bibendum quis, scelerisque a diam. Curabitur lacinia vestibulum blandit.</p>
  </div>
</article>

＆＃13;

如何对齐照片和文字并正确显示？

1 个答案: