响应式网页设计栏出现在下方
Posted
技术标签:
【中文标题】响应式网页设计栏出现在下方【英文标题】：Responsive web design column appearing below 【发布时间】：2021-12-21 19:29:19 【问题描述】：所以我一直在尝试制作一个响应式网页，这应该是结果。
当我尝试在配置文件之后添加第二列时，由于某种原因，它出现在它的下方，而不是像这样。
无论我从所学中应用了什么，框都会出现在下面。我只能猜测这里的边框会影响列，即使我调整了浏览器的大小以使这样的事情发生，但它显然看起来不像。
这是我在 CSS 文件中所做的：
/* rows and column */
.row::after
content: ””;
clear: both;
display: table;
[class*=”column-”]
float: left;
padding: 2px;
width: 100%;
@media only screen and (min-width: 768px)
.column-1 width: 8.33%;
.column-2 width: 16.66%;
.column-3 width: 25%;
.column-4 width: 33.33%;
.column-5 width: 41.66%;
.column-6 width: 50%;
.column-7 width: 58.33%;
.column-8 width: 66.66%;
.column-9 width: 75%;
.column-10 width: 83.33%;
.column-11 width: 91.66%;
.column-12 width: 100%;
*
box-sizing: border-box;
/* css class selector */
.menu
max-width:100%;
.menu ul
list-style-type: none;
margin:0;
padding:0;
.menu li
padding: 5px;
margin-bottom: 5px;
background-color:#1CA2BB;
color: white;
.menu li:hover
background-color: #58DADA;
.menu .subject
background-color:#005792;
font-size:20px;
.border-subjects
padding: 5px 5px 0px 5px;
border:5px solid #F7B633;
.border-profile
padding:5px;
border:5px solid #F7B633;
.header-content
background-color:#005E7C;
color: white;
font-size:25px;
padding: 10px 15px 10px 15px;
position:sticky;
width:100%;
top:0;
left:0;
text-align:right;
margin-bottom: 10px;
/* css element selector */
img
display:block;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
height: auto;
width: 130px;
max-width: 100%;
height: auto;
/* css id selector*/
#img-android
max-width: 100%;
width:89px;
height: auto;
As for the html...
<!-- language: html -->
<html>
<head>
<title>Responsive Web Page</title>
<meta name = "viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="row header-content">
<div class="column-12">
Juan Dela Cruz
</div>
</div>
<!-- end of div: header -->
<div class="row">
<div class="column-3 border-profile">
<div class="row">
<div class="column-12">
<img src="https://simg.nicepng.com/png/small/128-1280406_view-user-icon-png-user-circle-icon-png.png"/>
</div>
</div>
<div class="row">
<div class="column-12">
<p>Name: Juan Dela Cruz</p>
</div>
</div>
<div class="row">
<div class="col-12 menu">
<ul>
<li>
Home
</li>
<li>
Subjects
</li>
<li>
Assignment
</li>
<li>
Quiz
</li>
<li>
About
</li>
</ul>
</div>
</div>
<!-- end of row: menu -->
</div>
<!-- end of row:profile -->
<div class="column-9 border-subjects">
<img src="https://simg.nicepng.com/png/small/128-1280406_view-user-icon-png-user-circle-icon-png.png"/>
</div>
</div>
</div>
</body>
</html>
边框主题应该适合并与配置文件大小相同。我应该如何调整主题以显示在个人资料的同一行？
【问题讨论】：
【参考方案1】：好吧，基本上你要找的是一种 CSS 样式来以正确的方式进行布局。
样式可以是网格或弹性框。 我更喜欢弹性盒子，因为它可以响应不同的屏幕尺寸，并且可以根据不同尺寸的内容进行缩放/如果你愿意，你还可以隐藏溢出和滚动。
网格元素的响应速度不快，在大多数情况下，您的内容被固定在网格内联空间中。而弹性盒可以随内容缩放。 此外，Flexbox 还允许您决定当屏幕空间过多或空间不足时内容的行为方式，而网格在 CSS 规则方面更加“刚性”
这里我将单个元素嵌套在一个弹性盒子中
html
background: #f6faff;
.container
display: flex;
flex-wrap: wrap;
margin: -0.5rem;
.item
margin: 0.5rem;
background: #f3edd6;
border: 3px solid #b59214;
color: #b59214;
padding: 3rem;
font-size: 2rem;
text-align: center;
<div class="container">
<div class="item">long content long content long content long content long content</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>有关 flexbox 或网格比较的更多详细信息，请参阅比较文章 Flexbox Vs Grid
关于 flexbox 的完整细节，这篇文章很全面 Complete guide to flexbox
【讨论】：
哦，我们还没有达到Flexbox的地步，所以我们基本上是专门使用GridView的。虽然我很欣赏你提出 Flexbox 的事实，因为它可以让我在下周的主题之前做好准备。 好的，在这种情况下，您想要遍历每个显示宽度为 100% 的 CSS 元素并更改那些 [class*=”column-”] float: left;填充：2px；宽度：100%；以上是关于响应式网页设计栏出现在下方的主要内容，如果未能解决你的问题，请参考以下文章