无法在移动广告

时间:2016-01-25 20:29:12

标签: html css html5 css3 media-queries

首先,我是移动开发的新手,所以提前道歉可能是一个简单的问题。但是我已经研究了几天,但似乎无法让它发挥作用。

当我切换到移动视图时,我无法在适当的高度渲染特定的DIV。所有其他div在桌面和移动设备上都能很好地工作。有问题的div在桌面视图中看起来很好,但在移动设备中却看不到。

以下是该页面的链接:http://echoflyfishing.com/2016

有问题的div是“DOUBLE HAND”。我希望它和它上面的“SINGLE HAND”一样高。无论我做什么,我都无法正确调整尺寸。我知道有一个简单的解决方案,但我已经尝试了所有我能想到的高度和难度。

以下是相关的HTML:

                <div class="sh_container_m">
                    <table cellpadding="0" cellspacing="0" class="sh_container_table_m">
                        <tr>
                            <td style="font-size: 3.5vw;padding-top: 2vw; padding-bottom: 2vw;"><p>Single Hand</p></td>
                        </tr>
                    </table>
                    <div class="sh_images_container_m">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td>This is where the single hand image carousel will be</td>
                            </tr>
                        </table>
                        <div class="dh_container_m">
                            <table cellpadding="0" cellspacing="0" class="dh_container_table_m">
                                <tr>
                                    <td style="font-size: 3.5vw;"><p>Double Hand</p></td>
                                </tr>
                            </table>
                            <div class="dh_images_container_m">
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>This is where the double hand image carousel will be</td>
                                    </tr>
                                </table>
                            </div>  
                        </div>
                    </div>
                </div>

CSS:

.dh_container_m
{
    display: block;
    visibility: hidden;
    margin: 0 auto;
    width: 100vw;
    text-align: center;

}

.dh_container_table_m
{
    margin: 0 auto;
    width: 100vw;
    border: none;
    background-color: #fbaa27 !important;   
}

2 个答案:

答案 0 :(得分:0)

你的意思是你的dh_images_container_m div嵌套在sh_images_container_m div中吗?它将采用它的“父母”属性,这也可能导致你的一些尺寸问题。

在旁注中,您可以将标题中的css文件链接为type =“text”。它们应该是type =“css / text”。

答案 1 :(得分:0)

使用px而不是vw,因为它是百分比并定义两个div的宽度,因为你想要简单的一个建议是使用bootstrap css框架它对你更好,你可以在它的帮助下轻松地建立响应式网站。