个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:10:57 25 4
gpt4 key购买 nike

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

我只想说，我在这方面是一个非常缺乏经验的程序员，我应该警告你代码很乱。

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

图像: Small-screen attempt at display和 Basic large-screen attempt at display

我还附上了一张图片，展示了当我尝试缩小它时发生的情况 - 也就是说，一半离开屏幕，另一半只能通过滚动访问。

代码如下:

<!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;

}

最佳答案

是这样的吗？

https://codebrace.com/editor/b1d87528b

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

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

.exampleheadera 中的每个子 div (.contsidebyside)。

并删除

display: flex;

来自 .exampleheadera

希望对您有所帮助! :)

关于css - HTML/CSS 如何通过将其堆叠为一列来使显示响应较小的屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52104326/

25 4 0
文章推荐： html - 表格单元格内的菜单不响应 z-index
文章推荐： javascript - 如何在页面加载时淡入元素而不是 "appear"？
文章推荐： javascript - Highstock + Bootstrap 日期选择器
文章推荐： javascript - 塌边向上开口
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com