html - 在容器内对齐上下文

大家好，我想建立一个包含所有内容的主容器的页面，该容器中的图像覆盖了一定量的容器，标题位于左侧，文本位于右侧。

我遇到的问题是如何将文本放置在特定的布局中，我有一个示例可以证明我正在尝试做的事情：



这个图像是我已经做过的：



这就是我在Wordpress后台办公室中拥有的东西。

 <div id="content">
     [getImgTag name="servicos-Financeiro" class="imgresize"]
     <b>Aconselhamento Financeiro</b>
     <hr size="3" color="blue" width="190px" align="left">
 </div>

这是我为id指定的“内容”的相应属性。

 #content {
    /*width: 750px;*/
    height:80%;
    margin: 0 auto;
    text-align: left;
    background-color: #ffffff;
    overflow: auto;
}

为此，我试图复制的是完全相同的布局，在其标题的左侧和文本在右侧，如果您需要查看我的代码，您可以自由询问！

最佳答案

您可以像下面的小示例一样进行操作：JSFiddle

基本上，您创建两列，然后可以将样式应用于每一列。

.popup-title{
  display: inline-block;
  width: 30%;
  vertical-align: top;
  text-align: right;
  margin-right: 20px;
}

.popup-text{
  width: 60%;
  display: inline-block;
}