Question

我正在创建一个网站。我先从头开始。我有这个代码用于我的标题页：

<!DOCTYPE html>
<html>
<head>
    <title>Responsive Navigation Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function() {
            var pull        = $('#pull');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
    </script>
</head>
<body>
<a href="index.php">
<img border="0" class="logo" src="images/logo.png" width="15%" height="20%" align="left" /></a> <font size="15%"><div align="center" class="BDtext"> Title Here<br> Description Here</font></div><br>
    <nav class="clearfix">
        <ul class="clearfix">
            <li class="home"><a href="index.php">Home</a></li>
            <li class="about"><a href="about.php">About</a></li>
            <li class="me"><a href="ben.php">About Me</a></li>
            <li class="sessions"><a href="sessions.php">Sessions</a></li>
        </ul>
        <a href="#" id="pull">Menu</a>
    </nav>
</body>
</html>

我知道align="left"用于允许其他所有内容定位到图像右侧。

但是。

我只希望标题和描述位于图像的右侧。

在某些网络浏览器中，菜单栏会覆盖图像。

这个例子就是我在style.css中使用这段代码的时候：

@media only screen and (max-width : 320px) {

.BDtext {
display: none;
}

我想让它在图像下方对齐。

请有人解释我如何保持图像左对齐但停止菜单栏重叠图像而不是使用br代码？

请帮忙。

谢谢你。

禁用徽标在菜单栏上左对齐

0 个答案: