Question

JSfiddle

我有一种情况，我希望在div中的文本左侧浮动一个小图像。我不希望文本包含在图像下，有些研究让我在overflow:hidden;上添加了<p>属性。虽然这使得图像旁边的段落符合我的要求，但以下段落与第一段不对齐。是否有一种很好的方法可以使所有段落对齐？我尝试了display: table-row;，但这会影响页面上的其他元素（我已经阅读了为什么会出现这种情况）。

我需要在JSFiddle中存在的约束内工作（即，无法真正修改html），并且跨浏览器支持是优先事项。

＆＃13;

.header {
  color: white;
  background-color: red;
  padding: 15px;
}

.header p {
  overflow: hidden;
}

.img {
  background-color: green;
  width: 45px;
  height: 45px;
  float: left;
}

＆＃13;

<div class="header">
  <div class="img">

  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
    pretium augue vitae neque finibus, quis ornare dolor fermentum.
  </p>
  <p>
    Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
  </p>

</div>

＆＃13;

Answer 1

对图像宽度的段落+图像和段落之间所需的边距/空间使用margin-left。那么您就不需要overflow。

.header {
  color: white;
  background-color: red;
  padding: 15px;
}

.header p {
  margin: 0 0 1em 55px;
}

.img {
  background-color: green;
  width: 45px;
  height: 45px;
  float: left;
}

<div class="header">
  <div class="img">

  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
    pretium augue vitae neque finibus, quis ornare dolor fermentum.
  </p>
  <p>
    Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
  </p>

</div>

Answer 2

所以，你应该为整个事物设置一个div，一个用于图像，一个用于文本。

我不知道这是不是你要找的东西，但是你走了。

.container {
  width: 400px;
  height: auto;
}
.imageDiv {
  max-width: 200px;
  height: auto;
  float: left;
}
.image {
  max-width: 100%;
}
.text {
  max-width: 200px;
  min-width: 200px;
  text-align: center;
  float: left;
}

<div class="container">
  <div class="text">
    <p>
    Some text.
    </p>
  </div>
  <div class="imageDiv">
    <img class="image" src="http://nexceris.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg">
  </div>
</div>

Answer 3

为其他内容编码一个div并在div中管理这两个内容。

<div class="header">
    <div class="img">

    </div>

    <div class="other">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut pretium augue vitae neque finibus, quis ornare dolor fermentum. 
        </p>
        <p>
        Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
        </p>
    </div>

</div>

如何将此div中的段落与纯CSS对齐？

3 个答案: