时间戳

首页 > 解决方案 > 如何使用 svg 和文本内联显示

html - 如何使用 svg 和文本内联显示

问题描述

我有以下片段：

#reply{
background: lightgray;
}

#inline_txt_svg{
  display: inline-block; 
  max-width: 50px; 
  margin-top: 15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
   <div class="col-md-6">
      <div id="reply" class="col-md-12">
         <div class="row">
            <div class="col-md-2">
               <div id="inline_txt_svg">
                  <img src="https://image.flaticon.com/icons/svg/848/848043.svg">
                  18/06/2020 (15:46)
               </div>
            </div>
            <div class="col-md-10">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
               <p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
               </p>
               <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
               </p>
               <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-6"></div>
</div>

我希望文本和 svg 在同一行。

像这样的东西：

在此处输入图像描述

标签： htmlcsstwitter-bootstrap-3

解决方案

Bootstrap 总是有点摆弄网格，看看什么合适，我做了一个小例子，我可以如何布局网格。希望这可以帮助您解决问题。

注意：我更改了 col-md tot xs 以使其在代码片段中可见，您可以将其更改回来。

#reply {
  background: lightgray;
  padding: 15px 0;
}

#inline_txt_svg {
  display: block;
}

#inline_txt_svg img {
  max-width: 50px;
}

time {
  display: inline-block;
  padding: 15px 0 15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row" id="reply">
    
    <div class="col-xs-2 text-center">
      <div id="inline_txt_svg">
        <img src="https://image.flaticon.com/icons/svg/848/848043.svg" alt="profile-image">
      </div>
    </div>
    
    <div class="col-xs-10">
      <time class="">18/06/2020 (15:46)</time>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
      <p>et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
               </p>
               <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

推荐阅读