Question

从设计创建网站时遇到一个小问题。

设计师使用文本换行来获取图像周围的文本（FFS !!!!!）。现在我想出了如何在网站上解决这个问题，将图像划分为2个单独的图像，如：

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

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

有没有人有解决方案？

Answer 1

像往常一样将图像浮动，然后同时清除它们。

＆＃13;

div {
    border: 1px solid #000;
    padding: 10px;
    width: 500px;
}

img {
    float: right;
    clear: both;
    margin: 10px 10px 10px 10px;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

在此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 3

我试图在codepen上解决您的问题。 async library

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

3 个答案: