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

Question

我正在尝试用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;

}

Answer 1

像这样吗

https://codebrace.com/editor/b1d87528b

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

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

到.exampleheadera每个子div（ .contsidebyside ）。

并删除

display: flex;

来自.exampleheadera

希望这可以帮助！ :)

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

问题描述

1 个解决方案

解决方案1
0 2018-08-30 20:06:43

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

问题描述

1 个解决方案

解决方案1 0 2018-08-30 20:06:43

解决方案1
0 2018-08-30 20:06:43