Question

我正在创建我的网站，我需要添加div元素，如视频，表格等;这是我的网站：http://www.albertoporrasmoreno.com/tiendasonline/

这是我的实际代码;我是新人

CSS：

#apDiv1 {
    position:relative;  
    width: 225px;   
    height: 70px;   
    z-index: 1;     
    left: 300px;    
    top: 375px; 
}
#apDiv2 {   
    position: absolute;
    width: 225px;
    height: 70px;
    z-index: 1;
    left: 400px;
    top: 675px;
 }

HTML：

 <div id="apDiv1">
    <iframe src="//www.youtube.com/embed/92Qeg7jKeZI" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
</div>
<div id="apDiv2">
    <a href="http://www.prestashop.com/download/pdf/PrestaShop-Feature-List-es.pdf">
        <img class="alignnone size-full wp-image-31" alt="BOTON-CARACTERISTICAS-PRESTASHOP" src="http://www.albertoporrasmoreno.com/tiendasonline/wp-content/uploads/2014/01/BOTON-CARACTERISTICAS-PRESTASHOP.jpg" width="641" height="128" />
    </a>
</div>

我希望你能帮助我，感谢

Answer 1

如果没有更多信息，很难完全回答，但我会尽力帮助：

使用媒体查询可以轻松完成响应式布局（不使用插件）。我可以看到这些已在您的页面上实现。

在media_queries.css文件中，首先格式化桌面的所有div元素。很多人会使用固定的桌面布局。

然后，转到您的平板电脑和移动设备样式。由于屏幕尺寸有限且设备尺寸可变，我建议使用灵活的布局。将width属性更改为百分比。您可能还需要调整display属性，以使您的元素正确适合屏幕。希望这有帮助！

Answer 2

据我所知，你想改变apDiv1和apDiv2的宽度吗？

所以，首先删除iframe的width和height attibutes以及来自HTML代码的图片。

HTML：

 <div id="apDiv1">
    <iframe src="//www.youtube.com/embed/92Qeg7jKeZI" allowfullscreen="" frameborder="0"></iframe> // removed width and height attributes here
</div>
<div id="apDiv2">
    <a href="http://www.prestashop.com/download/pdf/PrestaShop-Feature-List-es.pdf">
        <img class="alignnone size-full wp-image-31" alt="BOTON-CARACTERISTICAS-PRESTASHOP" src="http://www.albertoporrasmoreno.com/tiendasonline/wp-content/uploads/2014/01/BOTON-CARACTERISTICAS-PRESTASHOP.jpg" /> // removed width and height attributes here too
    </a>
</div>

现在在CSS中为@media-queries

中的各个分辨率添加所需的宽度和高度

发表评论以获得更多帮助。感谢名单！

如何...响应Div元素

2 个答案: