小编Eri*_*man的帖子

我说要学习响应式设计,但到目前为止,有一件事我似乎无法弄清楚...

这是一个有效的例子:http://ericbrockmanwebsites.com/dev1/

我想把div元素(contactBg)里面的文字放到左边的图像底部.显然我可以通过在px中定义高度来做到这一点,但是当窗口的其余部分调整大小而不是流动时,该高度会保持不变.

如果有任何好的文章,你可能知道这解释了如何做到这一点,这将是非常有帮助的,谢谢!

这是标记:

<div class="row-fluid">
        <div class="span10 offset1">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span5">
                        <img src="images/logo.jpg" alt="logo" />
                        <img src="images/store.jpg" alt="store" />
                    </div><!-- /span5 -->
                    <div class="span7">
                        <img src="images/portal.jpg" alt="portal">
                        <div class="contactBg">
                            Administration: Emma Jane Julien<br />
                            <a href="mailto:ej@emmajulien.com">ej@emmajulien.com</a>
                        </div><!-- /contactBg -->
                    </div><!-- /span7 -->
                </div><!-- /row-fluid -->
            </div><!-- /container-fluid -->
        </div><!-- /span10 offset1 -->
    </div> <!-- /row-fluid -->

这是css:

   body {
        background: url(../images/3D2A1698A177AF9B71_218.png) repeat;
    }

    img {
        max-width:100%;
        padding-bottom:1%;
    }

     .container-fluid {
        background:#fff;
        padding: …

所以我有一个有趣的困境,我在一个响应式网站上工作,当我调整浏览器的大小时,一切正常,但是当我从我的iphone查看网站时,它并没有抓住来自相应媒体查询的查询,我定义为:

@media (max-width: 479px) {
  rules
}

该网站是ericbrockmanwebsites.com/dev2想知道是否有人曾经遇到过这个问题.

任何帮助是极大的赞赏.

我似乎无法弄清楚如何从下往上显示隐藏的内容,而不是从上到下.我在这里完成了一些功课,并遇到了来自jQuery UI的解决方案,但必须实现它错误.非常感谢任何帮助 - 脚本新手.

干杯!

这是我正在使用的

剧本:

$(document).ready(function() {
  $('#clientsOpen').click(function() {
     $('#clientsDropDown #clientsDashboard').slideToggle({ direction: "up" }, 300);
 $(this).toggleClass('clientsClose'); 
  }); // end click
});

标记:

<div id="clientsDropDown">
<div id="clientsDashboard">
    <p id="clientsCTA">Let's make something beautiful together...<br /><a href="mailto:brockman.eric@gmail.com">brockman.eric@gmail.com</a></p>
</div><!-- /clientsDashboard -->
<p id="clientsOpen">clients</p>
</div><!-- //clientsDropDown -->

风格:

#clientsDropDown {
    bottom:0;
width: 100%;
padding-bottom:2%;
z-index: 100;
}

#clientsOpen {
background: url("images/open.png") no-repeat scroll 68px 10px #414142;
color: #ececec;
cursor: pointer;
float: left;
font-size: 26px;
margin: -2px 0 0 10%;
padding: 0 15px 2px; …

我有一个网站使用js在两个不同的导航菜单之间切换.它一直工作到一周前左右,我无法弄清楚原因.想知道这里是否有人可以向我指出我没有看到的东西.

这是我的标记:

<div class="catMenu">
    <a href="javascript:showonlyone('newboxes1');">Works</a>
</div>

<div class="newboxes" id="newboxes1" style="display:block;" >
    ...the 1st menu
</div>

<div class="catMenu2">
    <a href="javascript:showonlyone('newboxes2');" >About</a>
</div>

<div class="newboxes" id="newboxes2"  style="display:none;">
    ...the 2nd menu
</div> 

这是我的js:

$(document).ready(function() {
    function showonlyone(thechosenone) {
       $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show();
          }
          else {
               $(this).hide();
          }
        });
    }
});

当我使用firebug查看我的控制台时,出现以下错误:

ReferenceError: showonlyone is not defined

但由于我对js缺乏了解,我不完全确定如何解决这个问题.

任何人都能解释一下吗？