Question

所以我有多个div标签，每个标签代表一个内联块。每个div都有一个图像和标题作为文本。我希望能够并排显示它们，如下图所示：

（对于此图像，请参阅“入门”部分，因为这是我专门指的内容。）

我的问题是如何实现这种结构？我尝试将图像和文本并排放置，但是在下面的代码中却无效。

.Getting-Started {
  background-color: lightBlue;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
}

.Step1,
.Step2,
.Step3 {
  display: inline-block;
}

br {
  margin: 0px;
  padding: 0px;
  line-height: 0px;
}

.Step1 {}

.Step2 {}

.Step3 {}

<div class="Getting-Started">
  <h1 style="margin: 0 0 20px;">Getting Started</h1>

  <div class="Step1">
    <img src="#" alt="#">
    <h2 style="margin: 0px;">Step 1: Select your year level above</h2>
  </div>
  <br>

  <div class="Step2">
    <img src="#" alt="#" width="">
    <h2>Step 2: Choose a level of difficulty you feel cofident with</h2>
  </div>
  <br>

  <div class="Step3">
    <img src="#" alt="#">
    <h2>Step 3: Select a topic and click on "Read More"</h2>
  </div>
  <br>

</div>

https://jsfiddle.net/ct69hkbg/

Answer 1

从HTML和CSS中删除Step1 ... 3类。
删除<br>标签。
使用div:nth-of-type(odd) img和div:nth-of-type(odd) img选择器左右交替浮动图片。

.Getting-Started {
  background-color: lightBlue;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
}

br {
  margin: 0px;
  padding: 0px;
  line-height: 0px;
}

.Getting-Started div:nth-of-type(odd) img {
  float: left;
}

.Getting-Started div:nth-of-type(even) img {
  float: right;
}

<div class="Getting-Started">
  <h1 style="margin: 0 0 20px;">Getting Started</h1>

  <div>
    <img src="#" alt="#">
    <h2>Step 1: Select your year level above</h2>
  </div>

  <div>
    <img src="#" alt="#" width="">
    <h2>Step 2: Choose a level of difficulty you feel confident with</h2>
  </div>

  <div>
    <img src="#" alt="#">
    <h2>Step 3: Select a topic and click on "Read More"</h2>
  </div>

</div>

Answer 2

这是简单代码

HTML

<h3>
    <span class="first-label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

 .first-label:after {
    content: '\A';
    white-space: pre; }

Answer 3

尝试此代码：

.Getting-Started {
  background-color: lightBlue;
  padding-top: 20px;
  padding-bottom: 50px;
}

.Step {
   display: flex;
   flex-direction: row-reverse; 
   justify-content: space-between;
   align-items: center;
   border: 1px solid #000;
   text-align: right;
}

.Step:nth-child(2n) {
   flex-direction: row; 
   text-align: left;
}

.Step h2 {
  flex: 0 0 60%;
}

img {
  width: 150px;
  height: 150px;
  background-color: yellow;
  border: 2px solid yellow;
}

<div class="Getting-Started">
  <h1 style="margin: 0 0 20px;">Getting Started</h1>

  <div class="Step">
    <img src="#" alt="#">
    <h2 style="margin: 0px;">Step 1: Select your year level above</h2>
  </div>


  <div class="Step">
    <img src="#" alt="#" width="">
    <h2>Step 2: Choose a level of difficulty you feel cofident with</h2>
  </div>


  <div class="Step">
    <img src="#" alt="#">
    <h2>Step 3: Select a topic and click on "Read More"</h2>
  </div>
</div>

Answer 4

标题元素<h1>至<h6>，因此无法内嵌或内嵌显示。例如，使用内联元素。跨度。 https://jsfiddle.net/snehansh/xdw9cp50/4/

.Getting-Started {
  background-color: lightBlue;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
}

.Step1, .Step2, .Step3 {
  display: inline-block;
}

br {
  margin: 0px;
  padding: 0px;
  line-height: 0px;
}

.Step1 {

}

.Step2 {

}

.Step3 {

}

<div class="Getting-Started">
  <h1 style="margin: 0 0 20px;">Getting Started</h1>

  <div class="Step1">
    <img src="#" alt="#">
    <span>Step 1: Select your year level above</span>
  </div>
  <br>
  
  <div class="Step2">
    <img src="#" alt="#" width="">
    <span>Step 2: Choose a level of difficulty you feel cofident with</span>
  </div>
  <br>

  <div class="Step3">
    <img src="#" alt="#">
    <span>Step 3: Select a topic and click on "Read More"</span>
  </div>
  <br>

</div>

Answer 5

您的错误是在CSS中将类“ step1，step2，step3”的div元素设置为inline-block。您必须将display个这些元素的子元素设为inline-block

.Getting-Started {
  background-color: lightBlue;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 50px;
}

.step h2,
.step img {
  display: inline-block;
  vertical-align: middle;
}

.step img {
  margin-right: 10px;
}

br {
  margin: 0px;
  padding: 0px;
  line-height: 0px;
}

稍微重构了代码，将“ step1，step2，step3”替换为代码中可以看到的步骤

检查以下内容：https://jsfiddle.net/gj02r3dn/

如何为每组内联块开始新行？

5 个答案: