Html 防止图像和图像丢失；从重叠中删除文本

我有一个隐藏在div中的滑块。每个元素都放在这个div中，图像被设置为div的背景。左边我有一个图像，右边我有一个标题和文本，还有一个行动按钮

我希望图像立即位于文本的左侧。如果我将文本宽度设置为较小的值，当在手机上查看页面时，图像将使文本无法阅读。在HTML和.CSS中，您认为什么是实现这项工作的最好的/最简单的方法？< /P>

。滑动电子邮件线程{
背景：url（“http://4.imimg.com/data4/YP/FD/MY-13642581/hp-laptop-500x500.jpg）左下角无重复；
背景尺寸：包含；
高度：500px；
宽度：120%；
底部：8px；
左：16px；
}
.电子邮件线程头{
字体系列：Arial、Helvetica、无衬线字体；
填充顶部：20px；
垫底：20px；
字体大小：40px；
宽度：95%；
保证金：0；
颜色：#FFFFFF；
字体大小：粗体；
文本转换：大写；
}
.电子邮件线程文本{
颜色：#FFFFFF；
字体大小：15px；
保证金：0自动30px；
宽度：100%；
}
.电子邮件线程btn链接{
宽度：50%；
}
.电子邮件线程按钮{
}
.电子邮件线程btn{
边框：2个实心#FFFFFF！重要；
边界半径：3px；
背景色：透明！重要；
文字装饰：无；
过渡：背景色0.5s缓和，颜色0.5s缓和，边框0.5s缓和；
字体大小：1.2米；
颜色：#FFFFFF！重要；
填充：1%1%；
显示：内联块；
保证金：0自动；
宽度：30%；
}
.电子邮件线程btn:悬停{
文字装饰：无；
颜色：#F8981D！重要；
过渡：背景色0.5s缓和，颜色0.5s缓和，边框0.5s缓和；
背景色：#FFFFFF！重要；
}
.幻灯片内容{
保证金：0px自动；
宽度：100%；
线高：1.1
利润上限：-30px；
字体大小：400；
边缘底部：30px；
宽度：75%；
文本对齐：左对齐；
填充：20px；
}

介绍我的网站
我的文本在这里&它是重叠的。

我建议一些反应灵敏的款式。将您希望定位到图像侧面的所有元素放置在包含div中，并在css中使用媒体查询来重新设置图像和内容部分的样式。此外，尽可能避免内联样式，以避免将来出现令人头痛的问题

在幻灯片中尝试类似的内容

HTML

---

你可以开始阅读响应式网页设计。

我建议一些响应式风格。将您希望定位到图像侧面的所有元素放置在包含div中，并在css中使用媒体查询来重新设置图像和内容部分的样式。此外，尽可能避免内联样式，以避免将来出现令人头痛的问题

在幻灯片中尝试类似的内容

HTML

---

你可以开始阅读响应性网页设计。

我坚持你不要将图像作为背景，尤其是当你在左边显示图像，在右边显示标题、段落时，因为你需要更多的预防措施，而不是将图像放在文本下

最好/最简单的方法是在html中使用

标记

以下是iphone 6 plus[最大设备宽度：414px]和iphone 6[最大设备宽度：375px]的PC、mobile view的代码：

HTML:

<div class="gradient-bg slide">
        <div class="slide-hmpg">
            <img src="current-ac-banner.jpg" alt="slide image" class="slide-image" /> <!--ADD YOUR IMAGE HERE -->
            <div class="slide-containing-content">
                <div class="slider-header">Introducing My Site</div>
                <div class="slider-text">Welcome to the hmpg slider with content in it.</div>
                <div class="button-link"><a class="slider-button-cta" href="" target="_blank">LEARN MORE</a>
                </div>
            </div>
        </div>
    </div>

---

我坚持你不要把图像作为背景，尤其是当你在左边显示图像，在右边显示标题，段落时，因为你需要更多的预防措施，图像不能放在文本下

最好/最简单的方法是在html中使用

标记

以下是iphone 6 plus[最大设备宽度：414px]和iphone 6[最大设备宽度：375px]的PC、mobile view的代码：

HTML:

<div class="gradient-bg slide">
        <div class="slide-hmpg">
            <img src="current-ac-banner.jpg" alt="slide image" class="slide-image" /> <!--ADD YOUR IMAGE HERE -->
            <div class="slide-containing-content">
                <div class="slider-header">Introducing My Site</div>
                <div class="slider-text">Welcome to the hmpg slider with content in it.</div>
                <div class="button-link"><a class="slider-button-cta" href="" target="_blank">LEARN MORE</a>
                </div>
            </div>
        </div>
    </div>

---

你能提供一个有效的演示吗？你能发布一个JSFIDLE或者一些让它更容易阅读的东西吗？我用你的代码创建了一个JSFIDLE（只是把图像改成一个有效的），但是可能缺少CSS，行为不是你想要的，也不会像那样（我的意思是，你说的bug不存在，也没有正确的行为）。你好谢谢你的反馈！这是一把JS小提琴@MichaelCoker@AndreiTumbar我制作了一个JSFIDLE，很抱歉给你带来了麻烦。你能提供一个工作的演示吗？你能发布一个JSFIDLE或一些让它更容易阅读的东西吗？我用你的代码创建了一个JSFIDLE（只是更改了图像使其工作），但是可能缺少CSS，行为不是预期的，也不会像那样（我的意思是，你说的bug不存在，也没有正确的行为）嗨！谢谢你的反馈！这里是一个JS小提琴！@迈克尔科克@安德里乌姆巴尔，我制作了一个Jsfiddle，很抱歉的感谢反馈@ Phil D.我没有完全建立媒体查询响应，但因为桌面版本仍然没有定位的方式，它需要的。d当时希望在不做太多的工作的情况下将其应用于移动设备。但我愿意接受这样一个事实，即我当前的格式可能必须改变以适应移动设备。很难对图像和文本进行概念化处理。我将在上午尝试你的建议。媒体查询的优点是它们仍然可以桌面上的rk。当用户将其窗口的大小调整到我指定的600px以上时，将使用条件样式。一些人认为，为mobile first开发是最好的方法，但最终取决于您。您可以将此逆转为桌面优先。如果您在.slide内容的宽度内使用calc，您应该能够避免溢出问题。或者，你也可以研究以下问题或解决方案：）这是一个很好的观点。首先想到手机肯定不会让我处于这种境地！回到最初的概念化，你会说在主div中有背景是可以的，还是你认为如果我简单地放置imag，总体来说会更容易

<div class="gradient-bg slide">
        <div class="slide-hmpg">
            <img src="current-ac-banner.jpg" alt="slide image" class="slide-image" /> <!--ADD YOUR IMAGE HERE -->
            <div class="slide-containing-content">
                <div class="slider-header">Introducing My Site</div>
                <div class="slider-text">Welcome to the hmpg slider with content in it.</div>
                <div class="button-link"><a class="slider-button-cta" href="" target="_blank">LEARN MORE</a>
                </div>
            </div>
        </div>
    </div>

img.slide-image{ /*Added This class for image*/
        width:400px;
        height:auto;
        float:left;
        margin-right:20px;
    }

    .gradient-bg { /* gradient bg inside of slider, truncated */
        background: #F8981D; /* Old browsers */
        background: -moz-linear-gradient(top,  #F8981D 0%, #B1792A 45%);
        width:100%;
        height:660px;
    }

    .slider-header{ /* Overlap issue */
      font-family: "Arial,Helvetica,sans-serif;
      padding-top: 20px;
      padding-bottom: 20px;
      font-size: 40px;
      width: 95%;
      margin: 0;    
    }
    .slider-text {  /* Overlap issue */
      font-size: 15px;
      margin: 0 auto 30px;
      width: 100%;
    }


    .button-link {
      width: 50%;
      float:left; /*Added This*/
    }


    .slider-button-cta { /* overlap issue on mobile */
        border: 2px solid #000000 !important;
        border-radius: 3px;
        background-color: transparent !important;
        text-decoration: none;
        font-size: 1.2em;
        padding: 1% 1%;
        display: inline-block;
        margin: 0 auto;
        width: 30%;
    }


    /*FOR IPHONE 6 PLUS */
    @media screen and (max-device-width: 414px) and (orientation: portrait){
        img.slide-image{ /*Added This class for image*/
            width:100%;
            height:auto;
            float:center;
        }

        .button-link {
            width:100%;
            margin-left:10px;
        }

        .slider-header, .slider-text{
            margin-left:10px;
        }
    }

    /*FOR IPHONE 6 */
    @media screen and (max-device-width: 375px) and (orientation: portrait){
        .button-link {
            width:420px;
            margin-left:10px;
        }
    }