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

【问题标题】：My text won't flow beside my images?我的文字不会在我的图像旁边流动？
【发布时间】：2016-06-23 18:07:53
【问题描述】：

如何将文字放在这些图片旁边？我已经尝试了一切，但我似乎无法弄清楚如何？我希望它出现在图片旁边。

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

【问题讨论】：

这个假定是什么样子的？
不太明白你想要什么。 “除了”是什么意思？
在你的 CSS 中添加 display: inline-block 到 .bigimg。
另外，绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，并且有更好、响应速度更快的选项。查看LearnLayout.com

标签： html css image text

【解决方案1】：

这是代码，您不需要使用绝对位置来执行此操作，请参阅代码。

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

【讨论】：

【解决方案2】：

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

注意：您需要全屏查看示例，才能看到所有内容都“排成一行”。

你的意思是这样的：

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

【讨论】：

【解决方案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>

【讨论】：