首页 文章

使2个图像在没有容器div的情况下正确地直接在彼此之下浮动

提问于
浏览 次
1

从设计创建网站我遇到一个小问题 .

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

2 images so the text can float around it

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

enter image description here

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

有人有解决方案吗？

html css image css-float

3 回答

  • 0

    像往常一样漂浮图像并同时清除它们 .

    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> 不是必需的，也适用于香草文本 .

    回复于
  • 3

    在这个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;
    }

    这肯定会起作用 . 我检查过..

    回复于
  • 0

    我试图在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}

    给出正确的尺寸和使用我可以解决您当前的问题 .

    回复于

相关问题