Question

我想要的是什么：

1：我想要的是echo '<span class="badge bg-red">Denied</span>';直接在echo '<b><a href="https://####/reactie"> '</b></a>';之下，img是全高。如果我使用<br>，它会将文本放在img下面而不是它旁边。因为我需要图像始终在左侧，旁边有文字。

2：我想要的第二件事是

下面有一条小线

echo '<b><a href="https://####/reactie"> '</b></a>'; echo '<a> - ' . $topic['voornaam'] . '</a>';

现在看起来如何。

代码：

       <div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title"><b>Topics</b></h3>
    </div><!-- /.box-header -->          

<div class="box-body">
   <?php
    $toppic = $app->get_topics();
    foreach($toppic as $topic){
     echo '<div id="topic">';
     if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) { 
        echo '<img style="height:100%;"class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id']src="###.'/'.$topic['foto'].'"###'" />';
     } else {
        echo '<i class="fa fa-fw fa-user img-circle"></i>';
     }
       echo '<b><a href="https://####/reactie"> '.$topic['topicnaam'].'<$####'</b></a>'; 
       echo '<a> - ' . $topic['voornaam'] ####. " " . $topic['achternaam']#### . '</a>';
       echo '<span style="float:right;"class="fa-stack"><span class="fa fa-comment-o fa-stack-2x"></span><strong class="fa-stack-1x" style="font-size:10px;">999</strong></span>';
       echo '<span class="badge bg-red">Denied</span>';
       echo '</div>';
    }
  ?>
    </div><!-- /.box-body -->
    <div class="box-footer text-center">
    </div><!-- /.box-footer -->
    </div><!-- /.box -->

自定义css：

#topic a {
    color: black;
    margin-left: 1%;
}

#topic {
    padding: 10px;
}

#topic i{
    font-size: 2.3em;
    width: 33px;
}

Answer 1

首先，在<div class="box-body">的php代码中存在一些sintax错误，请检查它，因为编译器可能会抛出错误。

在css部分，我会将position: relative用于<div class="topic">内的DOM元素，然后使用top, bottom, left, right进行调整（检查this out以获取有关定位的更多信息css中的属性）。另外，我会用height: 100%设置图像全高，但是，作为推荐，尝试使用height: auto，使用此属性img高度调整到DOM，它可能会得到你喜欢的高度（ Here's有关身高属性的一些信息。）

最后，您可以使用<u> html标记或css text-decoration: underline获取小行。您可以看到here。

希望这个答案可以帮助你，如果确实如此，请将其投票，以便人们可以在需要时获得帮助：）

Answer 2

其中一种方法是使用list标签以下是为方便起见的示例：

HTML：

<ul>
<li>
  <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>

CSS：

.pic{
  max-width:150px;
  max-height:150px;
  margin-right:50px;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

ul {
    list-style-type: none;
}

＆＃13;

.pic{
  max-width:150px;
  max-height:150px;
  margin-right:50px;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

ul {
    list-style-type: none;
}

＆＃13;

<ul>
<li>
  <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>

＆＃13;

使用您的代码进行相应调整。玩得开心:)）

不要让文本看起来正确

2 个答案: