我的文字不會在我的圖像旁邊流動？

-1

如何將文本放在這些圖像旁邊？我嘗試了一切，但我似乎無法弄清楚如何？我希望它出現在圖像的BESIDE。

的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; 
}

來源

2016-06-23 Minchae

這是什麼*** *** suppposed樣子？ –

不太明白你想要什麼。「除了」是什麼意思？ –

將'display：inline-block'添加到css中的'.bigimg'。 –

正如其他人已經提到：不要用絕對定位佈局你的頁面。

注意：您需要全屏查看示例以查看所有內容「排成一行」。

你的意思是這樣的：

.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>

來源

2016-06-23 09:36:25 Eytibi

下面的代碼，你並不需要使用絕對位置來做到這一點看的代碼。

.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>

來源

2016-06-23 09:57:15

<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>

來源

2016-06-23 10:07:53

我的文字不會在我的圖像旁邊流動？

回答

相關問題