私のイメージは私のイメージの横に流れませんか？

Question

これらの画像の横にテキストを挿入するにはどうすればよいですか？私はすべてを試しましたが、どのように考え出すことができませんか？私はそれがイメージの上に現れるようにしたいと思います。ランダム画像を使用して

jsFiddle：https://jsfiddle.net/0z1pfbs7/

HTML

<section class="pdc"> 
    <div class="moreproduct"> 
     <div class="bigimg"> 
      <img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /> 
     </div> 
     <ul> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
     </ul> 

     <div class="producttext"> 
      <h3>New Balance</h3> 
      <h1>Men's MX608v4</h1> 
      <p>SGF</p> 

     </div> 
    </div> 
</section> 

CSS他の人がすでに述べたように

.pdc{ 
    display: inline; 

} 
.moreproduct img { 
    position: relative; 
    border: 1px solid #93a2ad; 
    margin-top: 4px; 
} 

.moreproduct ul{ 
    list-style: none; 
} 
.moreproduct ul li img{ 
    width: 100px; 
    height: 100px; 
    margin-left: 80px; 
} 
.bigimg{ 
    margin-top: 2em; 
    position: absolute; 
    width: 450px; 
    height: 450px; 
    margin-left: 240px; 
} 
.producttext{ 
    position: absolute; 
    overflow: hidden; 
} 

Answer 1

：あなたのページをレイアウトする絶対位置を使用しないでください。

注：すべての行が「1行に」整列していることを確認するには、例をフルスクリーンで表示する必要があります。

は、あなたがこのようなものを意味するか：

.pdc{ 
 
    display: inline; 
 

 
} 
 
.moreproduct img { 
 
    position: relative; 
 
    border: 1px solid #93a2ad; 
 
    margin-top: 4px; 
 
} 
 

 
.moreproduct ul{ 
 
    list-style: none; 
 
    display: inline-block; 
 
} 
 
.moreproduct ul li img{ 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.bigimg{ 
 
    margin-top: 2em; 
 
    display: inline-block; 
 
    
 
    height: 300px; 
 
} 
 
.producttext{ 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    height: 450px; 
 
}

<section class="pdc"> 
 
      <div class="moreproduct"> 
 
       <ul> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
       </ul> 
 
       <div class="bigimg"> 
 
        <img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /> 
 
       </div> 
 
       <div class="producttext"> 
 
        <h3>New Balance</h3> 
 
        <h1>Men's MX608v4</h1> 
 
        <p>SGF</p> 
 

 
       </div> 
 
      </div> 
 

 

 
     </section>

Answer 2

は、ここでのコードですが、あなたはこのコードを見やって、絶対位置を使用する必要はありません。

.pdc{ 
 
    display: inline; 
 
} 
 
.moreproduct img { 
 
    position: relative; 
 
    border: 1px solid #93a2ad; 
 
    margin-top: 4px; 
 
} 
 

 
.moreproduct ul{ 
 
    list-style: none; 
 
    float:left; 
 
} 
 
.moreproduct ul li img{ 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.bigimg{ 
 
    margin-top: 2em; 
 
    float:left; 
 
    width: 400px; 
 
    height: 450px; 
 
    margin-left: 20px; 
 
} 
 
.producttext{ 
 
    float: left; 
 
    overflow: hidden; 
 
    margin-top: 20px; 
 
} 
 
.clear{ 
 
    clear:both; 
 
}

 <section class="pdc"> 
 
      <div class="moreproduct"> 
 
       
 
       <ul> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
        <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
 
       </ul> 
 
       <div class="bigimg"> 
 
        <img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /> 
 
       </div> 
 

 
       <div class="producttext"> 
 
        <h3>New Balance</h3> 
 
        <h1>Men's MX608v4</h1> 
 
        <p>SGF</p> 
 
       </div> 
 
       <div class="clear"></div> 
 
      </div> 
 

 

 
     </section>

Answer 3

<style> 

.pdc{ 
    display: inline; 

} 
.moreproduct img { 
    position: relative; 
    border: 1px solid #93a2ad; 
    margin-top: 4px; 
} 

.moreproduct ul{ 
    list-style: none; 
} 
.moreproduct ul li img{ 
    width: 100px; 
    height: 100px; 
    margin-left: 80px; 
} 
.bigimg{ 
    margin-top: 2em; 
    position: absolute; 
    width: 636px; 
    height: 450px; 
    margin-left: 240px; 
    left: 11px; 
} 
.producttext{ 

    overflow: hidden; 
    float:right; 
    padding-top:25%; 
} 
</style> 


<section class="pdc"> 
    <div class="moreproduct"> 
     <div class="bigimg"> 
      <img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /> 
      <div class="producttext"> 
       <h3>New Balance</h3> 
       <h1>Men's MX608v4</h1> 
       <p>SGF</p> 
      </div> 
     </div> 
     <ul> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
      <li><a href="#"><img src="http://i.imgur.com/Xt6vUQD.jpg" alt="" /></a></li> 
     </ul> 
    </div> 
</section>