Question

我正在尝试在响应式网页设计中布局一些输入字段和文本框，但无法让它们正确显示。我已经使用 https://www.w3schools.com/css/css_rwd_mediaqueries.asp 的教程作为入门。

我试图在屏幕左侧的第一列中显示三个输入字段和一个下拉菜单，然后紧挨着它们在同一行上两个文本区域，最好相距约 1em。如果使用小（电话）屏幕，则两个文本区域应显示在下拉菜单下方并显示在同一行（如果可能），否则应显示在另一个下方。

我可以将它们显示在同一行上，虽然不是相邻的，但在调整文本区域大小时会立即显示在一列而不是一行中。

我在 https://jsfiddle.net/vue3p6ca/ 创建了一个 JSFiddle 来说明问题。

我该如何解决？

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="row">
    <div class="col-3 col-s-3 menu">
        <ul>
        <label for="fname">First names:</label>
        <input type="text" id="fname" name="fname" maxlength="50" size="30" ><br><br>
        <label for="lname">Last name:</label>
        <input type="text" id="lname" name="lname" maxlength="30" size="21"><br><br>
        <label for="location">Current location:</label>
        <input type="text" id="location" name="location" maxlength="30" size="21"><br><br>
        
        <label for="cars">Choose a car:</label>
        <select id="cars" name="cars">
            <option value="audi">Audi</option>
            <option value="fiat">Fiat</option>
            <option value="saab">Saab</option>
            <option value="volvo">Volvo</option>
        </select>
        </ul>
    </div>

    <div class="col-3 col-s-12">
        <div class="outputboxes">
            <p><textarea id="square" rows="8" cols="15" name="sqr1" readonly></textarea></p>
        </div>
    </div>
    <div class="col-3 col-s-12">
        <div class="outputboxes">
            <p><textarea id="square" rows="4" cols="12" name="sqr2" readonly></textarea></p>
        </div>
    </div>
</div>
</body>
</html>

CSS

* {
  box-sizing: border-box;
}

.outputboxes {
    /* background-color: #33b5e5; */
    /* color: #ffffff; */
    text-align: center;
    font-size: 14px;
    padding: 0em;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

[class*="col-"] {
  float: left;
  padding: 5px;
}

#square {
padding: 0em;
resize: none;
width: auto;
}

textarea {
padding: 0em;
resize: none;
width: auto;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 { width: 8.33%; }
  .col-s-2 { width: 16.66%; }
  .col-s-3 { width: 25%; }
  .col-s-4 { width: 33.33%; }
  .col-s-5 { width: 41.66%; }
  .col-s-6 { width: 50%; }
  .col-s-7 { width: 58.33%; }
  .col-s-8 { width: 66.66%; }
  .col-s-9 { width: 75%; }
  .col-s-10 { width: 83.33%; }
  .col-s-11 { width: 91.66%; }
  .col-s-12 { width: 100%; }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 { width: 8.33%; }
  .col-2 { width: 16.66%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.33%; }
  .col-5 { width: 41.66%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.33%; }
  .col-8 { width: 66.66%; }
  .col-9 { width: 75%; }
  .col-10 { width: 83.33%; }
  .col-11 { width: 91.66%; }
  .col-12 { width: 100%; }
}

响应式网页设计布局

0 个答案: