Question

我有一张图片，我需要向左浮动并让文字段段自动显示在右侧。

例如：

<div class:"floated-image"><img src="img/fox.png" alt="Fox logo">
<p>The quick brown fox jumped over the log. <a>The fox is here.</a>
</p></div>

 .floated-image{
    float: left;
 }

不幸的是，这不是任何想法吗？直到星期一我都不会把我的材料送到学校，我想把它解决掉！除了这段代码，我已经完成了其他所有操作，并尝试将代码放在段落中。 CSS：

Answer 1

<div class:"floated-image">错误，<div class="floated-image">是正确的。

使用此代码：

.floated-image img {
    float: left;
 }

.floated-image img {
    float: left;
    width: 200px;
 }

<div class="floated-image">
  <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="Fox logo">
  <p>The quick brown fox jumped over the log. <a>The fox is here.</a></p>
</div>

如果你想要.floated-image浮动。

使用此代码：

.floated-image {
    float: left;
    border: 1px solid;
 }

 .floated-image img {
    float: left;
    width: 200px;
 }

.floated-image {
    float: left;
    border: 1px solid;
 }

 .floated-image img {
    float: left;
    width: 200px;
    margin-right:5px;
 }

<div class="floated-image">
  <img src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg" alt="Fox logo">
  <p>The quick brown fox jumped over the log. <a>The fox is here.</a></p>
</div>

Answer 2

试试这个：

<img style="height: 200px; width: 200px; float: left;" src="https://developers.google.com/search/images/searchHome-Amp.svg" alt="Fox logo">


<p>The quick brown fox jumped over the log. <a>The fox is here.</a>
</p>

Answer 3

像这样？它可以显示flex，inline-flex，-webkit-box

 .floated-image {
   float: left;
   display:flex;
 }

<div class="floated-image">
<img src="https://static.xx.fbcdn.net/rsrc.php/v1/yi/r/odA9sNLrE86.jpg" alt="Fox logo">
  <p>The quick brown fox jumped over the log. <a>The fox is here.</a>
  </p>
</div>

段落左侧的浮动图像（文本）

3 个答案: