使 2 个图像在没有容器的情况下直接浮动 div

Question

我在根据设计创建网站时遇到了一个小问题。

设计者使用文字换行在图片周围添加文字 (FFS!!!!!)。现在我想到了如何通过 div 将图像分成 2 个单独的图像来在网站上解决这个问题，例如：

现在我正在尝试这样做。但是当我给图像 float:right 时，它们会彼此相邻而不是直接在彼此下方，例如：

现在有很多关于这个问题的帖子。他们建议在他们周围放一个 dive 。但这对我来说是不可能的，因为我将它们分开以创建不同的宽度并在它们周围放置 div 会让我回到原来的问题。

有人有解决办法吗？

Answer 1

在这个div中取一个main_div为此编写代码：

<div class="main_div">
  <div class="txtdiv">
  </div>

  <div class="imgdiv">
  </div>
  <div class="clr"></div>
</div>

你的css会是这样的：

 .main_div:
  {
   width:100%;
  }
.txtdiv
    {
     width:45%;
     float:left;
    }
    .imgdiv
    {
     width:45%;
     float:left;
    }
    .clr
    {
      clear:both;
    }

这肯定有效。我查过了..

Answer 2

像你已经做的那样正确地浮动图像，同时清除它们。

div {
    border: 1px solid #000;
    padding: 10px;
    width: 500px;
}

img {
    float: right;
    clear: both;
    margin: 10px 10px 10px 10px;
}

<div>
    <img src="http://dummyimage.com/150x150/000/fff" alt>
    <img src="http://dummyimage.com/300x150/000/fff" alt>
    <p>
            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue.
    </p>
    <p>
            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
    </p>
    <p>
            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.
    </p>
</div>

<p> 不是必需的，也适用于原版文本。

Answer 3

我已尝试在 codepen 上解决您的问题。 http://codepen.io/Quantum/pen/NxLzWW

HTML

<div class="images">
<img width="100" height="100" src="">
<img width="200" height="100" src="">
</div>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

CSS

body{max-width:300px}
.images{margin-left:10px}
img{float:right}

提供正确的尺寸并使用我可以解决您当前的问题。

使 2 个图像在没有容器的情况下直接浮动 div

Making 2 images float right and directly under each other without container div

html

css

image

css-float