下面出现响应式网页设计专栏

Question

所以我一直在尝试制作一个响应式网页，这应该是结果。

当我尝试在配置文件之后添加第二列时，由于某种原因它出现在它下面而不是像这样。

无论我应用我所学的什么，下面都会出现这个框。我只能猜测这里的边框会影响列，即使我调整了浏览器的大小以使这种事情发生时它也无法适应，但它显然看起来不像。

这是我在 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>

边框主题应该适合并且与配置文件大小相同。我应该如何调整主题以与个人资料出现在同一行？

Answer 1

好的基本上你要找的是 CSS 样式来以正确的方式进行布局。

样式可以做成 grid 或 flexbox 。我更喜欢弹性框，因为它可以响应不同的屏幕尺寸，并且可以根据不同尺寸的内容进行缩放/如果您愿意，您还可以隐藏溢出和滚动。

网格元素几乎没有那么灵敏，在大多数情况下，您的内容固定在网格内联 space。其中 flexbox 可以随内容缩放。此外，Flexbox 还允许您决定当屏幕上 space 过多或 space 不足时您的内容应该如何表现，而网格在 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

下面出现响应式网页设计专栏

Responsive web design column appearing below

html

css

grid

responsive-design

css-grid