Question

我正在使用MDwiki在用户文档中渲染降价促销。我想添加浮动到右侧的图像。所以我在降价促销中有以下几点：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div id="BG" class="owl-carousel owl-theme">
  <div class="bg-item1">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-item2">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt">
          <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span> </div>
      </div>
    </div>
  </div>
</div>

因此，我得到了图像，它可以正确缩放，并且可以在屏幕上正确地进行右调整，但是文本仅显示在它的上方和下方，而不是在其左侧。还有什么要补充的吗？

我使用HTML img 标记而不是markdown Test test test. <img src="/UserGuide/pictures/Dashboard.png" alt="DashBoard" style="float: right; max-width: 50%;"></img> Next next next.结构，因为我找不到任何方法来应用这些样式。

这可能是MDwiki向导的问题。我注意到它确实处理了 img 标记，因此可以单击以放大视图。

Answer 1

为了我所处的任何人的利益：

这有效：

<p style="max-width: 50%; float: right;">
![Alt Picture Text](something.png "The Caption Of Something")
</p>

MDwiki使用 p 标签作为其图像结构的容器，因此上述问题中的CSS不会对其产生影响。因此，这将在容器周围创建一个容器，并且MDwiki会解析其中的文本。

用浮动图像编码Markdown

1 个答案: