如何将 HTML 代码分成两列，右侧有图像？答案

【问题标题】：How to split an HTML code into two columns with image on the right?如何将 HTML 代码分成两列，右侧有图像？
【发布时间】：2018-01-11 18:18:41
【问题描述】：

我正在使用 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>

这就是我要找的东西：

【问题讨论】：

我不确定“它虽然接受 html 标签”是什么意思。您可以将 CSS 内联或修改模板。你有你想要完成的模型图像吗？
你不能只在“模板”中的css中添加css吗？
@JakeParis 如果我输入任何 CSS，它只会显示为纯文本。
最后一个div class="col" 是您要放置 3 张图片的位置吗？
@JakeParis 是的，最后一个 div 容器是我想要三个图像的地方。

标签： html css wordpress divide

【解决方案1】：

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

<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/

【讨论】：

我是把它当作一个单独的容器，还是将我当前的文本整合到这个容器中？
只要父元素执行类似overflow:hidden 或clear:both 的操作，而子元素使用float:right，你应该没问题。如果您想在每个 div 中使用多个图像，则可能需要使用 padding 将它们水平间隔。

【解决方案2】：

你可以使用内联样式。

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

【讨论】：

把它放在最后一个 div 容器中？
不，那是最后一个div容器。将 style="float:right;" 属性添加到现有的
我只是一个例子。你可以这样写内联样式。
这将使整个
浮动。您是要单独浮动它们还是作为一组浮动？
float:right 也会使图像跳出 Div 而没有明确的修复或溢出设置。