Question

我正在将响应式网站从移动设备“转换”到桌面，偶然发现了一个问题。我不知道如何将照片和段落彼此并排放置。我已经提供了移动版本的代码，并且需要有关台式机版本的CSS的帮助。

曾经尝试过浮动和其他技巧，但文字大多压低了照片。

这是我的代码：jsfiddle.net/coebadr0 我想要图片的标题和段落

我希望这样：

https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2

.marketing {
  background-color: black;
}

.marketing h2 {
  font-size: 25px;
  font-family: "Catamaran";
  color: white;
  font-weight: 400;
  text-align: center;
  margin-top: 30px;
}

.marketing p {
  font-size: 20px;
  font-family: "Catamaran";
  color: white;
  font-weight: 300;
  text-align: center;
  padding: 20px 20px 20px 20px;
}

.marketing img {
  width: 100%;
  height: auto;
  display: block;
}

<section class="marketing">
  <h2>Header</h2>
  <p>Text Text Text Text Text Text Text</p>
  <img src="img/marketing.jpg">
</section>

Answer 1

为什么不遵循w3示例的代码？您甚至都没有浮动图片？您的图片宽度为100％，因此它将占据您期望的整个宽度。将此img放在您的<p>元素之前。

.marketing {
  background-color: black;
}

.marketing h2 {
  font-size: 25px;
  font-family: "Catamaran";
  color: white;
  font-weight: 400;
  text-align: center;
  margin-top: 30px;
}

.marketing p {
  font-size: 20px;
  font-family: "Catamaran";
  color: white;
  font-weight: 300;
  padding: 20px 20px 20px 20px;
}

.marketing img {
  display: block;
  float: left;
}

<section class="marketing">
  <h2>Header</h2>
  <img src="https://via.placeholder.com/150"/>
  <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</p>
</section>

Answer 2

事实上，浮点数可用于实现您正在寻找的此文本换行图片！首先，您的图片应位于您要环绕的文字的<p>内。另外，您目前已将图像设置为display: block;和width: 100%，这使图像占据了容器的整个宽度。我调整了您的代码，使其与所需的布局相匹配：

.marketing {
  background-color: black;
}

.marketing h2 {
  font-size: 25px;
  font-family: "Catamaran";
  color: white;
  font-weight: 400;
  text-align: center;
  margin-top: 30px;
}

.marketing p {
  font-size: 20px;
  font-family: "Catamaran";
  color: white;
  font-weight: 300;
  text-align: center;
  padding: 20px 20px 20px 20px;
  overflow: auto;
}

.marketing img {
  float: left;
}

<section class="marketing">
  <h2>Header</h2>
  <p><img src="https://placekitten.com/200/200">Text Text Text Text Text Text TextText Text Text Text Text Text TextText Text Text Text Text Text TextText Text Text Text Text Text Text</p>
</section>

编辑：如果要在文本和图像之间添加填充，则需要将其添加到图像而不是段落中，即：

.marketing img {
  padding-right: 10px;
}

Answer 3

实际上您可以在display：grid;

上尝试

这是代码...

.marketing {
  background-color: black;
  display: grid;
  grid-template-columns: auto auto;
}

.marketing h2 {
  font-size: 25px;
  font-family: "Catamaran";
  color: white;
  font-weight: 400;
  text-align: center;
  margin-top: 30px;
}

.marketing p {
  font-size: 20px;
  font-family: "Catamaran";
  color: white;
  font-weight: 300;
  text-align: center;
  padding: 20px 20px 20px 20px;
}

.marketing img {
  width: 100%;
  height: auto;
  display: block;
}

<section class="marketing">
  
   <img src="img/marketing.jpg">
  
  <div class="text">
  <h2>Header</h2>
  <p>Text Text Text Text Text Text Text</p>
  </div>
 
</section>

Answer 4

.marketing {
  background-color: black;
  display: grid;
  grid-template-columns: auto auto;
}

.marketing h2 {
  font-size: 25px;
  font-family: "Catamaran";
  color: white;
  font-weight: 400;
  text-align: center;
  margin-top: 30px;
}

.marketing p {
  font-size: 20px;
  font-family: "Catamaran";
  color: white;
  font-weight: 300;
  text-align: center;
  padding: 20px 20px 20px 20px;
}

.marketing img {
  width: 100%;
  height: auto;
  display: block;
}

<section class="marketing">
  
   <img 
src="https://ichef.bbci.co.uk/news/976/cpsprodpb/27C9/production/_103158101_tha.jpg">
  
  <div class="text">
  <h2>Header</h2>
  <p>Text Text Text Text Text Text Text</p>
  </div>
 
</section>

为什么左右浮动不起作用？尝试将照片和文字彼此对齐

4 个答案: