Question

在我的网站中，div内有段和图片。我试图将图像浮动到左侧，而段落浮动到右侧。但是，我的代码不起作用。

＆＃13;

.text {
  background-color: white;
  font: 400 15px/1.8 "Lato", sans-serif;
}

p {
  padding: 4em 4.5em;
  text-align: justify;
  color: #777;
}

.text2 {
  #display: inline-block;
}

.text2 p {
  float: right;
  width: auto;
  position: relative;
}

.text2 img {
  float: left;
  width: 20%;
  position: relative;
}

＆＃13;

<div class="text text2">

  <h3 style="text-align:center">XİDMƏTLƏR</h3>

  <p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante
    lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non
    molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione
    interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>

  <img src="http://via.placeholder.com/640x426">
</div>

＆＃13;

Answer 1

您必须为其定义宽度 - width: auto将是100％否则

＆＃13;

.text {
  background-color: white;
  font: 400 15px/1.8 "Lato", sans-serif;
}
p {
  padding: 4em 4.5em;
  text-align: justify;
  color: #777;
}
.text2 p {
  float: right;
  width: 60%;
}

.text2 img {
  float: left;
  width: 20%;
}

＆＃13;

<div class="text text2">

  <h3 style="text-align:center">XİDMƏTLƏR</h3>

  <p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante
    lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non
    molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione
    interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>

  <img src="http://via.placeholder.com/640x426">
</div>

＆＃13;

Answer 2

您可以将＆lt; p ＆gt; div中的元素然后将float属性设置为该div，并且两个div的宽度之和不应超过100％

＆＃13;

.text {
  background-color: white;
  font: 400 15px/1.8 "Lato", sans-serif;
}

p {
  padding: 4em 4.5em;
  text-align: justify;
  color: #777;
}

.text2 {
  #display: inline-block;
}

.text2 p {
  float: right;
  position: relative;
  width: 50%
}

.text2 img {
  float: left;
  width: 20%;
  position: relative;
}

＆＃13;

<!DOCTYPE html>
<html>
<div class="text text2">

  <h3 style="text-align:center">XİDMƏTLƏR</h3>

  <p>Parallax scrolling is a web site trend where the background content is moved at a different speed than the foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante
    lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non
    molestie dolor, nunc nisl dapibus vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, ratione
    interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam maecenas, porta porttitor placerat leo.</p>
  <img src="http://via.placeholder.com/640x426">
</div>


</html>

＆＃13;

Float属性不适用于<p>和<img/>元素

2 个答案: