Question

我需要将图像浮动到某些文本的右侧。 Div和文本都包含在众多DIV中，我不能改变HTML，只能改变CSS。

我认为这很容易，但出于某种原因，我无法弄明白。包含元素不能是固定宽度，因为这是响应式站点。

<div>
  <div>
    <div>
      <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. </p>
   </div>
  </div>
</div>



<div class="image-cont">
  <div>
    <div>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRMFGfVlnjbzD3dekwhIZ8yPYCzYuKInbzRNc9hU5doTPsPI51a" />
    </div>
  </div>
</div>

.image-cont {
  float: right;
}
div {
  display: inline;
}

更新 - 我可以通过以下方式实现这一点，但我宁愿图像是它的全宽，只有文字才是流畅的。

.image-cont {
  float: left;
  width:30%;
}
div > div > div {
  float: left;
  width:70%;
}

Answer 1

您可以使用此CSS来解决您的问题。

.image-cont {
  float: left;
  width:30%;
}
div > div > div {
  float: left;
  width:70%;
}

Answer 2

this一个怎么样？

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

Float DIV包含文本右侧的图像，其中容器必须是流体

2 个答案: