div内有两个p的图像定位

Question

请查看此代码笔以了解我的意思

http://codepen.io/MarkRBM/pen/KnztJ

我有一个4列布局。 .wrapper被限制在两个cols范围内。 .locstitle宽1个，.locsexcerpt宽1个，它们位于我想要的位置。我希望.locsimage直接位于.locsexcerpt的左侧在.loctitle下但我无法从.locslist的底部移动。如果我将标记移到.locsexcerpt上方，则它会显示在.locstitle和.locsexcerpt之上。我想我已经将问题缩小到我链接的代码，如下所示。提前谢谢。

HTML

<div class="wrapper">
  <div class="locslist">                       
    <p class="locstitle">Galway</p>
    <p class="locsexcerpt">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quod quas aut quisquam necessitatibus ut aliquid eligendi sunt voluptas fugitLorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quod quas aut quisquam necessitatibus ut aliquid eligendi sunt voluptas fugit!</p>
     <img src="/DevTemplate/img/aranislands.jpg"             alt="" class="locsimage">
  </div>
</div>

CSS

.wrapper{
  max-width: 25%;
}

.locslist{
  display: inline-block;
  text-align: center;
  vertical-align: top;
  border-radius: 10%;
  background-color: #3475b3;
  margin-bottom: 0.8em;
  width: 49%;
}
.locstitle{
  float: left;
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
  text-align: top;
  width: 50%;
}

.locsexcerpt{
  visibility: visible;
  display: inline-block;
  max-width: 45%;
}

.locsimage{
  float: left;
  display: inline-block;
  visibility: visible;
  width: 45%;
}

Answer 1

将图像嵌入标题段落中，并从图像中删除浮动：

<p class="locstitle">Galway
  <img src="/DevTemplate/img/aranislands.jpg" alt="" class="locsimage">
</p>

demo （向右滑动窗格）

Answer 2

只需向右浮动.locsexcerpt文本块。

查看codepen。我相信你会想要为图像添加一些填充，但定位是你正在寻找的（据我所知）。

http://cdpn.io/kvjsc

.locsexcerpt{
  visibility: visible;
  display: inline-block;
  max-width: 45%;
  float:right;
}

Answer 3

将图像移动到HTML中的标题下方，然后将clear:both;添加到CSS

HTML：

    <div class="wrapper">
  <div class="locslist">                       
    <p class="locstitle">Galway</p>
    <img src="/DevTemplate/img/aranislands.jpg"             alt="" class="locsimage">
    <p class="locsexcerpt">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quod quas aut quisquam necessitatibus ut aliquid eligendi sunt voluptas fugitLorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, quod quas aut quisquam necessitatibus ut aliquid eligendi sunt voluptas fugit!</p>

  </div>
</div>

CSS：

    .locsimage{
  float: left;
  display: inline-block;
  visibility: visible;
  width: 45%;
  clear:both;
}

你也可以摆弄这个位置。