首先,我是移动开发的新手,所以提前道歉可能是一个简单的问题。但是我已经研究了几天,但似乎无法让它发挥作用。
当我切换到移动视图时,我无法在适当的高度渲染特定的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;
}
答案 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框架它对你更好,你可以在它的帮助下轻松地建立响应式网站。