对齐容器内的上下文

Question

嘿伙计们所以我正在尝试构建一个包含所有内容的主容器的页面，在该容器中有图像覆盖一定数量的容器，左边的标题和文本到右。

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

这张图片就是我已经做过的：

这就是我在网页的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”的各个属性。

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

我试图复制的确是相同的布局，左边是标题，右边是文字，如果你需要再查看我的代码，你可以自由提问！

Answer 1

你可以像这个小例子那样做：JSFiddle

基本上你创建两列，然后你可以为每一列应用样式。

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

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