我的文字不会在我的图像旁边流动？

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

正如其他人已经提到的：不要使用绝对定位来布局页面。

注意：您需要以全屏方式查看示例，以确保所有内容都在“一行”中对齐。

你的意思是这样的：

.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

以下是代码，您不需要使用绝对位置来查看代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>