如何将 HTML 代码拆分为右侧图像的两列？

Question

我正在使用 wordpress 建立一个网站，目前已经完成了关于页面，但我想将图像添加到页面的右侧。我无法将任何 css 放入模板中，因为它已经有自己的 css。它虽然接受 html 标签。那么我将如何在页面右侧获得我想要的三张图片呢？这是我拥有的代码：

<div id="header">
  <h4 style="color: #6f9458;">Welcome to the Greens at Amyclae!</h4>
</div>

<div id="content">
  <div class="col">
    <p>my text here </p>
    <h6 style="color: #6f9458;">Overview</h6>
    <p>more text here</p>
   <h6> Stafford County Public Schools serve the Greens at Amyclae 
subdivision.</h6>
    <ul>
        <li>Winding Creek Elementary School</li>
        <li>Rodney Thompson Middle School</li>
        <li>Colonial Forge High School</li>
    </ul>
    <h6 style="color:#6f9458">Management Agency:
    Corporation
    Fredericksburg, VA 22401 </h6>
  </div>

  <div class="col" style="float:right">
    <img src="sample.jpg" alt="">
  </div>
</div>

这是我要查找的内容：

Answer 1

您可以使用内联样式。

<div class="col" style="float:right">
    <img src="sample.jpg" alt="">
</div>

Answer 2

你可以尝试这样的事情。图片向右浮动，但段落标签会环绕图片。

<div style="overflow:hidden;background-color:blue;width:100%">
  <img src="http://via.placeholder.com/150x50" alt="" style="float:right">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
  </p>
</div>

<div style="overflow:hidden;background-color:#000088;width:100%">
  <img src="http://via.placeholder.com/150x75" alt="" style="float:right">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
  </p>
</div>

https://jsfiddle.net/DanielGale/jkebwL0b/

Answer 3

如果您不想修改主题'css（实际上最好不要这样做）或创建子主题（并不总是真正必要的），并且您熟悉css，添加类和 ID，您可以使用这样的插件：https://pl.wordpress.org/plugins/custom-css-js/ 并将您的 css 放在那里。如果它有任何问题，它很容易逆转（通过简单地删除这个插件菜单中的修改代码）而不会对主题造成伤害。

如何将 HTML 代码拆分为右侧图像的两列？

How to split an HTML code into two columns with image on the right?

html

css

wordpress

divide