Question

我正在用HTML编写代码，我已经完成了很多工作，但是我无法理解如何将图像连续放置，我使用了display:inline属性但是在HTML5中使用了我只用HTML编写代码，因此我无法获得适当的解决方案。

请帮我解决这个问题。我在记事本上做代码。

＆＃13;

.A1 {width:100%;height:500px;display:inline;}

＆＃13;

<div class="A1">
<h2 style="display:inline; margin-left:300px; color:#00FFE7;">Spectacular Mountain</h2>
<img src="m.png" alt="Mountain View" style="display:inline; margin-left:300px;"> 

<h2 style="display:inline; margin-left:300px;color:#00FFE7;">Spectacular Mountain</h2>
<img src="m.png" alt="Mountain View"style="display:inline;margin-left:300px;">



<h2 style="display:inline; margin-left:300px;color:#00FFE7;">Spectacular Mountain</h2>
<img src="m.png" alt="Mountain View"style="display:inline;margin-left:300px;">
</div>

＆＃13;

Answer 1

首先，我删除了已经添加的所有CSS，然后我用h2包裹了每个img和div，然后给了width:100%;和float:left;这个div。并在float:left; h2标记上应用了img。

.A1 {

  width : 100%;
  
}

.A2 {
  float: left;
  width : 100%;
  
}

.A2 h2 {
color:#00FFE7;
  float: left;
  
}

.A2 img {
margin-left:100px;
  float: left;
  max-height: 50px;
  max-width: 50px;
  
}

<div class="A1">
  <div class="A2">
<h2>Spectacular Mountain</h2>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="Mountain View"> 
</div>
  <div class="A2">
<h2>Spectacular Mountain</h2>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="Mountain View">
</div>

<div class="A2">
<h2>Spectacular Mountain</h2>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" alt="Mountain View">
</div>
  </div>

Answer 2

请尝试以下操作： Demo

.A1 {
  width: 100%;
  height: 500px;
  display: block;
}

.inline-block {
  display: inline-block;
  width: 26%;
}

.inline-block h2,
.inline-block img {
  display: inline-block;
  max-height: 150px;
  margin-left: 300px;
}

Answer 3

尝试使用以下代码，它可能会对您有所帮助。

.A1Section{
  padding : 5px;
}
.A1Section .A1Img{
  display: table-cell;
  vertical-align: top;
  padding-left : 150px;
  
}
.A1Img img{
  width: 64px;
  height: 64px;
}

.A1heading{
  display: table-cell;
  vertical-align: top;
  padding : 5px;
  color:#00FFE7;
}

<div class="A1">
  <div class="A1Section">
    <h2 class="A1heading">Spectacular Mountain</h2> 
    <div class="A1Img">
      <img src="http://www.greatmountainbali.com/wp-content/uploads/2014/12/GMV_mountain_Frangi_ray-of-sunshine.jpg" alt="Mountain View" >
    </div>
  </div>
  <div class="A1Section">
    <h2 class="A1heading">Spectacular Mountain</h2>
    <div class="A1Img">
      <img src="http://www.greatmountainbali.com/wp-content/uploads/2014/12/GMV_mountain_Frangi_ray-of-sunshine.jpg" alt="Mountain View" >
    </div>
  </div>
  <div class="A1Section">
    <h2 class="A1heading">Spectacular Mountain</h2> 
    <div class="A1Img">
      <img src="http://www.greatmountainbali.com/wp-content/uploads/2014/12/GMV_mountain_Frangi_ray-of-sunshine.jpg" alt="Mountain View" >
    </div>
  </div>
</div>

如何在HTML中使用内联属性

3 个答案: