使用 img 空间的段落文本答案

【问题标题】：Paragraph text using img space使用 img 空间的段落文本
【发布时间】：2016-03-29 08:35:11
【问题描述】：

我正在尝试使整个内容可点击，因此我将图像和段落包裹在锚标记中。我给锚标签一个 40px 左右的内边距，给 img 标签一个 30 左右的右边距。它们都具有 inline-block 的显示属性。问题是它不像图像上的那样显示（附加）。我该如何解决？我还不太擅长 CSS 和 HTML。谢谢。

<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-meeting.png" alt="meeting minutes and agendas"><p>Meeting Minutes &amp; Agendas</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-bills.png" alt="pay bills online"><p>Pay Bills Online</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-document.png" alt="form &amp; document center"><p>Form &amp; Document Center</p></a>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
<a href="./"><img src="_assets_/images/icon-questions.png" alt="frequently asked questions"><p>Frequently Asked Questions</p></a>
</div><!-- /.col-md-3 -->

我的 CSS 是：

#panel p {font-family: 'Raleway', sans-serif;color: #fff;font-size: 18px;display: inline-block;margin: 0}
#panel img {width: 45px;margin-right: 25px;display: inline-block}
#panel a {background-color: #1b4952;display: block;border-radius: 10px;text-decoration: none}

What I want

What I have

【问题讨论】：

您能否分享相关的 CSS 或使用SOs Code Blocks 创建一个工作示例。
好的。所以你想要“Text”而不是“Text”之类的东西——对吧？如果是这样 - 首先，摆脱
标记，因为它开始一个新段落并且您希望它们全部在一起。其次，您可能需要考虑创建一个 1 行 2 列的小表格来显示信息。这样就可以保持在一起了。第三，您可能会考虑通过 GD 将其全部制作为单个图像。这也将保持在一起。只是一些想法。 :-)
嗨。我刚刚编辑了我的帖子并添加了我拥有的 CSS。谢谢！
你能告诉我怎么做吗？谢谢
我看到 ZgrKARALAR 已经发布了答案。如果这行得通 - 去吧！ :-) 如果没有 - 让我知道。 :-)

标签： html css image web

【解决方案1】：

我请你使用引导程序:)

关于你可以使用行来制作它。我只是简单地编辑您的代码检查并尝试一下，希望对您有所帮助。

<div class="col-md-3">
   <div class="row">
      <div class="col-md-6">
        <a href="./"><img src="_assets_/images/icon-meeting.png" alt="meeting minutes and agendas">
    <div class="col-md-6">
        <p>Meeting Minutes &amp; Agendas</p></a>
</div>
</div>
</div>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
   <div class="row"> 
   <div class="col-md-6">
<a href="./">
     <img src="_assets_/images/icon-bills.png" alt="pay bills online">
      <div class="col-md-6">
     <p>Pay Bills Online</p></a>
</div> 
     </div>
     </div>
     </div>
     <!-- /.col-md-3 -->
<div class="col-md-3">
   <div class="row"> 
   <div class="col-md-6">
<a href="./">
     <img src="_assets_/images/icon-document.png" alt="form &amp; document center">
     <div class="col-md-6">
     <p>Form &amp; Document Center</p></a>
  </div>
     </div>
     </div>
</div><!-- /.col-md-3 -->
<div class="col-md-3">
 <div class="row"> 
   <div class="col-md-6">
<a href="./"><img src="_assets_/images/icon-questions.png" alt="frequently asked questions">
  <div class="col-md-6"><p>Frequently Asked Questions</p></a>
    </div>
   </div>
   </div>
</div><!-- /.col-md-3 -->

更多信息查看this页面

【讨论】：

谢谢！我不确定我们是否可以在工作中这样做，但我仍然会使用它。 :)