Question

因为我解释了标题中的所有内容然后我将为你们提供我现在拥有的代码，我一直试图达到我想要的那么久但没有运气.... 它表现得像响应，但我想保持它，即使它的大小调整...... 截图 enter image description here

<!DOCTYPE html>
<html>
    <head>
        <title>
            Home
        </title>

        <style>
            body {
                font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                padding: 20px 50px 150px;
                margin: 0 0 0 0;
                font-size: 13px;
                text-align: center;
            }
            #content1{
                //float: left;
                width: 300px;
                height: 740px;
                margin-left: 50px;
            }
            #content2{
                //float: right;
                margin-right: 50px;
                width: 300px;
                height: 300px;
            }
            #content3{
                width: 740px;
                height: 740px;
            }
            .content{
                margin: 20px 100px auto auto;
                display: inline-block;
                background-color: #F0F0F0;
            }
            #navbar{
                margin: 10px auto auto auto;
                min-width: 120px;
                min-height: 120px;
            }
            #navbar-menu{

            }
            #navbar-menu ul {
                text-align: left;
                display: inline;
                margin: 0;
                padding: 15px 4px 17px 0;
                list-style: none;
                -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
                -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
            }
            #navbar-menu ul li {
                font: bold 12px/18px sans-serif;
                display: inline-block;
                margin-right: -4px;
                position: relative;
                padding: 15px 20px;
                background: #fff;
                cursor: pointer;
                -webkit-transition: all 0.2s;
                -moz-transition: all 0.2s;
                -ms-transition: all 0.2s;
                -o-transition: all 0.2s;
                transition: all 0.2s;
            }
            #navbar-menu ul li:hover {
                background: #555;
                color: #fff;
            }
            #navbar-menu ul li ul {
                padding: 0;
                position: absolute;
                top: 48px;
                left: 0;
                width: 150px;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
                display: none;
                opacity: 0;
                visibility: hidden;
                -webkit-transiton: opacity 0.2s;
                -moz-transition: opacity 0.2s;
                -ms-transition: opacity 0.2s;
                -o-transition: opacity 0.2s;
                -transition: opacity 0.2s;
            }
            #navbar-menu ul li ul li { 
                background: #555; 
                display: block; 
                color: #fff;
                text-shadow: 0 -1px 0 #000;
            }
            #navbar-menu ul li ul li:hover { background: #666; }
            #navbar-menu ul li:hover ul {
                display: block;
                opacity: 1;
                visibility: visible;
            }
            #navbar-menu ul li.active {
                background: #555;
                color: #fff;
            }
        </style>
    </head>

    <body background="../images/bg.png">
        <div id="navbar">
            <div id="navbar-menu">
                <ul><li class="active">Home</li>
                <li>About</li>
                <li>
                    Projects
                    <ul>
                        <li>Web Design</li>
                        <li>Web Development</li>
                    </ul>
                </li>
                <li>Blog</li>
                <li>Contact</li>
                </ul>
            </div>
        </div>
        <div id="content1" class="content">
        <h1>ey</h1>
        </div>
        <div id="content2" class="content">
        <h2>eye</h2>
        </div>
        <div id="content3" class="content">
        <h3>eyey</h3>
        </div>
    </body>
</html>

Answer 1

我相信你正在寻找媒体查询。如

@media（最小宽度：540px）{ ＆＃34; div你要调整{ ＆＃34;你想要影响的财产＆＃34; } }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

我修改了一些CSS代码：

CSS：已更新

#content1{
    width: 20%;
    height: 740px;  
}
#content2{
    width: 20%;
    height: 300px;
}
#content3{
    width: 40%;
    height: 740px;
}
.content{
    margin-top:20px;
    margin-left:5%;
    display: inline-block;
    float:left;
    background-color: #F0F0F0;
}

将上述代码替换为您的样式。

我如何在其他人旁边制作div，但是将它们保存在屏幕截图中

2 个答案: