Question

我在徽标附近添加了一个标语，宽屏上的一切看起来都很好

enter image description here

但是当我缩小屏幕时，文字会以一种奇怪的方式移动

我希望它移动到徽标下方并向下移动菜单

enter image description here

我尝试编辑响应式css文件，添加display: block;，使用positions播放似乎无效。

这是css：

#s5_header_wrap, #s5_footer_area_inner2, #s5_breadcrumb_font_wrap, #s5_component_wrap_inner {
padding-left:30px;
padding-right:30px;
position: relative;
}

#logo_tagline{

    font-family: "Verdana";
    color: #1f1f1f;
    font-size: 13px;
    position: relative; 
    height: 100px;
}

#logo_tagline p{
    margin: 0;
    padding: 0;
    padding-top: 15px;
    height: 100px;
    line-height: 23px
}


#logo_tagline{

        font-family: "Verdana";
        color: #1f1f1f;
        font-size: 13px;
        position: relative; 
        height: 100px;
    }

    #logo_tagline p{
        margin: 0;
        padding: 0;
        padding-top: 15px;
        height: 100px;
        line-height: 23px
    }

和html：logo_tagline位于s5_header_wrap

之内

Answer 1

如果你想要一个静态head元素（或其他任何元素），那么你可以尝试

element {
  min-width: someval; 
}

使用min-width将指定此元素必须在任何代码中具有此宽度，即使滚动浏览窗口也是如此！

如果要更改整个布局，可以考虑使用CSS3 Media Query

@media only screen and (min-width: 500px) { // if screen size 500px;
   /* change the properties so that 
    * logo comes above, and other elements
    * such as menu and text shows below it..*/
}

Answer 2

我看不到你的标记，但这里有一个简单的布局和样式，可以帮助你解决这个问题。我认为魔法可能在clear:both;为你。

<html>
    <head>
        <style>
            * {margin: 0; }
            .header {background-color: #eee;}
            .logo {
                background-color: ddd;
                border-right: 1px solid #333;
                width: 200px;
                height: 50px;
                float:left;
                margin: 0 20px 20px 0;
            }
            .header p {line-hieght: 20px;}
            .cf { clear: both;}
            ul {
             list-style: none;
             margin: 0;
             padding: 0;
             }
            ul li {
                display: inline-block;
                padding: 0 20px;
                border-right: 1px solid #333;
            }
            .navigation {
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="logo">DebutInvest</div>
            <p>THis is some text that will wrap when needed blah blah blah blah blah blah blah blah blah</p>
            <p>THis is some text that will wrap when needed blah blah blah blah blah blah blah blah blah</p>
            <p>THis is some text that will wrap when needed blah blah blah blah blah blah blah blah blah</p>
            <div class="cf"></div>
        </div>

        <div class="navigation">
            <ul>
                <li>BigWord1</li> 
                <li>BigWord2</li>
                <li>BigWord3</li>
                <li>BigWord4</li>
            </ul>
        </div>
    </body>
</html>

Answer 3

我怀疑徽标（或其容器）是浮动的。

如果确实如此，您可以在小屏幕上显示徽标float: none或提供标记行clear: both。

P标签不会在小屏幕上向下移动

3 个答案: