时间戳

首页 > 解决方案 > HTML/CSS 如何通过将其堆叠为一列来使显示响应较小的屏幕？

css - HTML/CSS 如何通过将其堆叠为一列来使显示响应较小的屏幕？

问题描述

我正在尝试使用 HTML 构建一个基本的聊天室系统，但在尝试为小屏幕平台实现响应式设计时遇到了一些问题。我已经尝试了几个小时，尝试了各种不同的解决方案，但不幸的是仍然卡住了。:(

我应该说，我在这个领域是一个非常缺乏经验的程序员我应该警告你代码是混乱的。

我已经在我的 PC 的宽屏幕上附加了基本显示的图像。

图像： 小屏幕显示尝试和 基本大屏幕显示尝试

我还附上了一张当我尝试缩小它时会发生什么的图像——也就是说，它的一半离开了屏幕，而另一半只能通过滚动来访问。

这是代码：

<!DOCTYPE html>
<html>
<head>
<title>
Grav1ty: Login
</title>
<link rel="stylesheet" href="gravitystyle.css">

<meta charset="UTF-8">
<meta name="description" content="Grav1ty Chat">
<meta name="keywords" content="Grav1ty, grud, soyuznerushimy, grav1ty">
<meta name="author" content="Grud">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="gravitylogo.PNG" />




</head>
<body style="background-image:url('background.jpg');font-family:Courier New;">
<div class="exampleheader">
<img src="gravitylogo.PNG" alt="Grav1ty Logo">
<p style ="color:white;"><font size="7">Grav1ty</font><p>
</div>

<!--<div class="examplerow">-->
    <div class="exampleheadera" class="container" style="padding: 10px; border: none;">
        <!--<div class="loginlayout">-->
        <div>
        <p style="color:#66c3fe;">
        <fieldset class="fieldseta" style="color:#66c3fe; padding: 10px; height: 350px; width: 300px;">
        <legend><b><h3>Welcome!</h3></b></legend>
        Welcome to <b>Grav1ty</b>,<br>Grav1ty is a <b>FREE</b>, online messaging service free from interruption or surveillance that will be developed over the next few months to suit your needs. Any queries? Contact me through Grav1ty! My username's Grud (well duh) and I'll be happy to help you out. Feel free to chat as you see fit...<br><br><i>Grud</i><br><br><b>Current Status: ONLINE</b>
        </fieldset>
        </div>
        <div>
        <form style ="color:white;" action="login.php">
            <fieldset class="fieldsetb" style="color:#66c3fe; height: 325px; padding: 30px;">
                <legend><b><h3>Log in:</h3></b></legend>
                Username:
                <input type="text" name="username" placeholder="Username" required><br>
                <br>Password:
                <input type="password" name="password" placeholder="Password" required>
                <br>
                <br>
                <input type="submit" value="SUBMIT" class="buttona">
                </form>

            </fieldset>
        </form>
        </div>
        <div>
        <form style ="color:white;">
            <fieldset class="fieldsetc" style="color:#66c3fe; height: 325px; padding: 30px;">
                <legend><b><h3>Sign Up:</h3></b></legend>
                Name:
                <input type="text" name="newname" placeholder="Name" required><br>
                <br>Username:
                <input type="text" name="newusername" placeholder="Username" required><br>
                <br>Password:
                <input type="password" name="newpassword" placeholder="Password" required>
                <br>
                <br>
                <input type="submit" value="SUBMIT" class="buttona">
                </form>
                </p>
            </fieldset>
        </form>
        <!--</div>-->   
        </div>
    </div>
<!--</div>-->

</body>


</html>

这是 CSS 样式表：

.buttona {
    background-color: #657EEB;
    border: 2px solid #1C43EF;
    border-radius: 6px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.buttona:hover {
    color: blue;
    background-color: white
}

.exampleheader {
    padding: 10px;
    text-align: center;
    background: #9b9ce7;
    color:  #11f2f2;
    border-radius: 2px;
    display: flex;
}
.exampleheadera {
    padding: 10px;
    text-align: center;
    background: white;
    color:  #11f2f2;
    border-radius: 2px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.examplenavbar {
    display: flex;
    background-color: #333;
    justify-content: space-around;
}

.examplenavbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

.examplenavbar a:hover {
    background-color: #ddd;
    color: black;
}

.examplerow {  
    display: flex;
    flex-wrap: wrap;

}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.exampleside {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;

}

/* Main column */
.examplemain {
    flex: 70%;
    background-color: white;
    padding: 20px;
}

/* Fake image, just for this example */
.examplefakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;

}

/* Footer */
.examplefooter {
    padding: 20px;
    text-align: center;
    background: #ddd;

}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */

.fieldseta {
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px solid #b4fef5 ;
    background-color: white;
    height: 550px
}
.fieldsetb {
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px solid #b4fef5 ;
    background-color: white;
    height: 550px
}
.fieldsetc {
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    border: 2px solid #b4fef5 ;
    background-color: white;
    height: 550px
}
.loginlayout {
  display: flex;
  justify-content: space-between;
  border: 3px solid #b4fef5;
  padding: 30px;

}

标签： csshtml

解决方案

像这样的东西？

https://codebrace.com/editor/b1d87528b

在示例中，我添加了以下属性

display: inline-block;
vertical-align: top;

到每个子div( .contsidebyside)里面.exampleheadera。

并删除

display: flex;

从.exampleheadera

希望这可以帮助！:)

推荐阅读