Question

因此，我在这里阅读了一些其他主题来创建响应式网站。不幸的是，我无法使用他们提供的信息，因为我的网站布局独特。布局在左侧不可滚动但右侧可滚动的中间被右拆分。当屏幕变小时，我希望左侧位于顶部，右侧（可滚动侧）位于底部，以便用户可以像在移动设备上那样上下滚动。正在为此寻找不同的解决方案，但似乎没有用。有人可以帮我吗？

这是代码（请注意左拆分和右拆分div）：

<body>

<div class="split-left">
    <div class="centered">
    <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Cover.png" class="cover">
    </img>
    </div>

    <header>
        <nav>
            <ul>
                <li><a href="#" class="menu">Menu</a>
                <div class="arrowup">
                    <ul>
                        <li><a href="#aboutus">About Us</a></li>
                        <li><a href="#newsletter">Newsletter</a></li>
                        <li><a href="#">Press Kit</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                </li>
            </ul>


            <!-- Social Media Links -->

            <div id="socialmedia">

            <a href="https://www.facebook.com/whammychat/?ref=bookmarks" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/FB.png" alt="Facebook"></a>

            <a href="https://twitter.com/whammychat" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/Twitter.png" alt="Twitter"></a>

            <a href="https://www.instagram.com/whammychat/" target="_blank"> <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/Social%20Media%20Icons/Instagram.png" alt="Instagram"></a>

            </div>

        </nav>          
    </header>
</div>

<!-- RIGHT -->

<div class="split-right">
    <div class="centered">
        <img src="file:///Users/Kavinda/Documents/Whammy/Web%20Development/New%20Logo%20-%20Social%20Media.png" class="logo"></img>
        <div class=catchphrase>
            <h1> 
                <span class="messenger"> Messenger </span> 
                <span class="x"> x </span> 
                <span class="gaming"> Gaming </span> 
            </h1>
        </div>
        <p class="soon"> Coming Soon <p>
        <img class="gif" src="https://whammychat.files.wordpress.com/2018/01/gif-6-website.gif" alt="Intro GIF
        "/>

css：

header ul li {
font-family: backtoschool;
position: relative;
z-index: 1.5;
list-style: none;
}

header ul li a {
display: block;
text-decoration: none;
color: white;
}

.menu {
border-style: solid;
border-color: white;
border-radius: 15px;
border-width: 1px;
margin: 4% 0% 0% -2%;
padding: 1.5%;
width: 10%;
text-align: center;
}

/* .menu {
transition: 1s ease;
}

.menu:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: 0.5s ease;
} */

header ul li ul {
display: none;
position: absolute;
background-color: black;
padding: 0%;
border-radius: 10px;
border-style: none;
margin: 0% 0% 0% -3.5%;
}

header ul li:hover ul {
display: block;
}

header ul li ul li {
width: 100px;
}

header ul li ul li a {
padding: 15%;
}

header ul li ul li a:hover {
background: #696969;
border-radius: 10px;
border-style: none;
}


/*Social Media Icons*/

#socialmedia img {
position: relative;
z-index: 1.5;
left: 71%;
width: 8%;
margin-top: -100px;
padding-bottom: 43px;
height: auto;
}

@keyframes bounce {
0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

40% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}
}

#socialmedia img:hover {
animation: bounce 1s;
}




.split-left {
position: fixed;
height: 100%;
width: 50%;
z-index: 1;
top: 0;
left: 0;
}

.split-right {
margin-left: 50%;
width: calc(100%-50%);
height: auto;
}

Answer 1

首先，如果您使用的是类似split left的类只需将它们写为<div class="split-left"></div>，然后为

添加此CSS即可

左侧

.split-left
 {
   position:fixed;
   width:400px;
   top:0;
   left:0;
   height:100%;
 }

在右侧，您可以使用此

.split-right
{
   margin-left:400px;
   width: calc(100% - 400px);
   height:auto;
   margin-left:0px;
   width: calc(100% - 0px);
}

您可以根据自己的需要使用高度。对于移动响应，您可以使用媒体查询

@media only screen and (max-width: 600px) 
{
.split-left{width:100%; height:auto; position:relative;}
.split-right{width:100%; position:relative;}`
}

使用我的布局创建一个自适应网站

1 个答案: