css - 如何对齐响应式 html CSS

Question

我有什么::

我需要什么::

第一张图片是我拥有的，而第二张是我应该做的。它应该是响应式的，但我发现很难对齐这两个部分。

我有这个用于 Html 和 CSS::

.contenedor {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 100%;
}
.uno {
  background-color: #009B76;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 36px
}
.uno img {
  margin: 4px;
}
.contenedor2 {
  width: 77%;
  display: flex;
  display: flex !important;
  position: relative;
  align-items: center !important;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  background-color: #F2F2F2;
}
.dos img {
  margin-top: 8px;
  margin-bottom: 42px;
}
.contenedor3 {
  max-width: 51%;
  width: 77%;
  display: flex;
  position: relative;
  align-items: center !important;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  background-color: blue;
}

<div class="contenedor">
  <div class="flex-item uno">
    <img src="farmasalogo.png">
  </div>
</div>
<div class="contenedor2">
  <div class="flex-item dos">
    <img src="circulo.png">
  </div>
  <div class="contenedor3">
    <div class="flex-item tres">
      <label>Farmacia:</label>
      <input type="text" name="lastname">
      <br>
      <label>Sucursal:</label>
      <input type="text" name="lastname1">
      <br>
      <label>Tipo de Farmacia:</label>
      <select>
        <option>Select an Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
  </div>
</div>

我真的被这个问题困住了，所以我真的可以使用帮助。非常感谢大家。

Answer 1

概念:在display: block之间切换(默认)和 display: table通过使用媒体查询。我相信同样的策略可以用来切换到 display: flex如果您愿意，也可以。

示例:在全屏模式下运行下面的代码片段以查看效果，然后查看代码。 (特别注意任何以 .form 开头的规则)

/* Default and extra small devices (portrait phones, less than 34em) */
html,
body {
  margin: 0em;
  padding: 0em;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  background-color: white;
}

.header {
  display: block;
  text-align: center;
}

.page-header {
  background-color: #009B76;
}

.page-section {
  margin: 0em auto;
  margin-top: 2em;
  padding: 2em;
  background-color: #F2F2F2;
}

.section-header {
  margin-top: -1.5em;
  margin-bottom: 2em;
}

.form {
  display: block;
}

.form-control-wrapper {
  display: block;
}

.form-label {
  margin-top: 1.5em;
  font-weight: bold;
}

.form-label,
.form-control {
  display: block;
}

.form-control {
  width: 100%;
  margin-top: 0.5em;
  border-style: solid;
  border-width: 1px;
  border-color: #BBB;
  background-color: transparent;
}

/* Small devices (landscape phones, 34em and up) */
@media (min-width: 34em) {

  .page-section {
    max-width: 30em;
  }

  .form {
    display: table;
    margin: 0em auto;
  }

  .form-control-wrapper {
    display: table-row;
  }

  .form-label {
    padding-right: 1.5em;
  }

  .form-label,
  .form-control {
    display: table-cell;
  }

}

/* Medium devices (tablets, 48em and up) */
@media (min-width: 48em) {
  .page-section {
    max-width: 44em;
  }
}

/* Large devices (desktops, 62em and up) */
@media (min-width: 62em) {
  .page-section {
    max-width: 58em;
  }
}

/* Extra large devices (large desktops, 75em and up) */
@media (min-width: 75em) {
  .page-section {
    max-width: 71em;
  }
}

<header class="header page-header">
  <img src="farmasalogo.png">
</header>
<section class="page-section">
  <header class="header section-header">
    <img src="circulo.png">
  </header>
  <form class="form">
    <div class="form-control-wrapper">
      <label class="form-label" for="pharmacy-field">Farmacia:</label>
      <input class="form-control" type="text" name="pharmacy" id="pharmacy-field">
    </div>

    <div class="form-control-wrapper">
      <label class="form-label"  for="branch-field">Sucursal:</label>
      <input class="form-control" type="text" name="branch" id="branch-field">
    </div>

    <div class="form-control-wrapper">
      <label class="form-label" for="pharmacy-type-field">Tipo de Farmacia:</label>
      <select class="form-control" id="pharmacy-type-field">
        <option>Select an Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
  </form>
</section>

(我的断点和一般编码风格直接取自 Bootstrap 或受其启发，它也可能提供类似的 [并且可能更好] 响应式解决方案)

其他说明:我建议使用 <form>在您的 HTML 中添加标签(就像我在我的示例中所做的那样)，这样当您到达那里时提交所有数据会更容易。此外，强烈建议将 em 作为选择单位。最后，我添加了 for=""属性为 <label>标签。这是一个非常容易养成的习惯(没有双关语意)，有助于在您的网站上提供更好的可访问性。

如果您有任何其他问题，请给我留言。希望对您有所帮助!