Question

我有什么::

我需要什么::

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

我有 Html ＆amp; 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

请勿使用<br>标记。你基本上需要这样的结构。 .contenedor2班级有flex-direction: column，每个.row项都有flex-direction: row。

<div class="contenedor2">
  <div class="head">
    <img src="circulo.png">
  </div>
  <div class="row">
    <label>Farmacia:</label>
    <input type="text" name="lastname">
  </div>
  <div class="row">
    <label>Sucursal:</label>
    <input type="text" name="lastname1">
  </div>
  <div class="row">
    <label>Tipo de Farmacia:</label>
    <select>
      <option>Select an Option</option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
  ....
</div>

CSS基本上就是这样的

.contenedor2 {
    display: flex;
    flex-direction: column;
}
.contenedor2 .row {
    display: flex;
    flex-direction: row;
}
.contenedor2 .row label {
    width: 300px;
    flex: 0 0;
}

Answer 2

概念：使用媒体查询在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，要么受启发，这也可能提供类似的[可能更好]的响应式解决方案）

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

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

如何对齐响应html CSS的东西

2 个答案: