1

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

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

我有一个 4 列布局。 .wrapper仅限于两列宽。 .locstitle宽 1 列，宽.locsexcerpt1 列，它们位于我希望它们进入的位置。我想在正下方.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%;
}
4

3 回答 3

2

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

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

演示（向右滑动窗格）

在此处输入图像描述

于 2013-07-17T13:01:03.867 回答
1

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

请参阅代码笔。我相信您会想要为图像添加一些填充，但定位是您正在寻找的（据我了解）。

http://cdpn.io/kvjsc

.locsexcerpt{
  visibility: visible;
  display: inline-block;
  max-width: 45%;
  float:right;
}
于 2013-07-17T13:01:26.840 回答
0

将图像移动到 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;
}

你也可以摆弄职位本身。

于 2013-07-17T13:04:51.710 回答