Question

我不能将这两个盒子对齐到同一行，每次我在它们上面放一些文字就不对齐了。我究竟做错了什么？看起来像内联块一样。请忽略这些内容。

.corpo {
    font-family: 'Roboto', sans-serif;
    height: 400px;
    margin: 200px 15px 30px 15px;
    text-align: center;
}
.bloco {
    display: inline-block;
    margin: 15px 5% 15px 5%;
    width: 300px;
    height: 350px;
    border-style: solid;
    border-width: 3px;
    border-color: grey;
}
.cabecalho-bloco {
    margin-bottom: 10px;
    border-bottom-style: solid;
    border-width: 2px;
    border-color: grey;
}
input[type="file"] {
    display: none;
}
#file {
    font-weight: normal;
    box-shadow: 1px 1px 4px 1px;
    color: grey;
    padding: 5px;
    border-style: solid;
    border-width: 1px;
}
#file:hover {
    color: black;
}

    <div class="corpo"> <!-- Blocos -->
        <div class="bloco">
            <div class="cabecalho-bloco"><h3 style="font-weight: bold;">Contagem</h3></div>
            <div>
            	<form>
            		<br><br>
            		<a><label id="file" for="selecao-arquivo">Selecionar arquivo</label>
    				<input id="selecao-arquivo" type="file"></a>
    				<br><br>
    				<input type="button" value="Baixar">
            	</form>
            </div>
        </div>	
        <div class="bloco">
            <div class="cabecalho-bloco"><h3 style="font-weight: bold;">Promoção</h3></div>
            <div>
            	<form>
            		<br><br>
            		<input type="text" placeholder="Produto">
            		<br><br>
            		<input type="button" value="Consultar">
            	</form>
            </div>
        </div>
    </div><!-- Fim blocos -->

Answer 1

默认垂直对齐方式为vertical-align: baseline，因此浏览器会对齐块的基线。在这种情况下，第一个的标签与第二个的输入因此，解决方案是将vertical-align: top添加到块中。

.corpo {
  font-family: 'Roboto', sans-serif;
  height: 400px;
  margin: 200px 15px 30px 15px;
  text-align: center;
}

.bloco {
  display: inline-block;
  margin: 15px 5% 15px 5%;
  width: 300px;
  height: 350px;
  border-style: solid;
  border-width: 3px;
  border-color: grey;
  vertical-align:top;                   /* added */
}

.cabecalho-bloco {
  margin-bottom: 10px;
  border-bottom-style: solid;
  border-width: 2px;
  border-color: grey;
}

input[type="file"] {
  display: none;
}

#file {
  font-weight: normal;
  box-shadow: 1px 1px 4px 1px;
  color: grey;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
}

#file:hover {
  color: black;
}

<div class="corpo">
  <!-- Blocos -->
  <div class="bloco">
    <div class="cabecalho-bloco">
      <h3 style="font-weight: bold;">Contagem</h3>
    </div>
    <div>
      <form>
        <br><br>
        <label id="file" for="selecao-arquivo">Selecionar arquivo</label>
                <input id="selecao-arquivo" type="file">
        <br><br>
        <input type="button" value="Baixar">
      </form>
    </div>
  </div>
  <div class="bloco">
    <div class="cabecalho-bloco">
      <h3 style="font-weight: bold;">Promoção</h3>
    </div>
    <div>
      <form>
        <br><br>
        <input type="text" placeholder="Produto">
        <br><br>
        <input type="button" value="Consultar">
      </form>
    </div>
  </div>
</div> <!-- Fim blocos -->

我也冒昧地从标签周围移除了<a> .. </a>，这并没有任何用途。

Answer 2

<div class="bloco1">    </div>  
<div class="bloco2">
</div>

使用bootstrap列

  <div class="row">
    <div class="col-xs-6 bloco1"></div>
    <div class="col-xs-6 bloco2"></div>
  </div>

你可以使用很多设备

Answer 3

首先，不要使用<br>来抵消，这只是讨厌而且要求出问题。我之所以这么说是因为所有不同的网络浏览器都使用他们自己的巫术来计算出多少垂直像素。

您问题的解决方案：在.bloco类中，添加float:left;参数。

下次你提出这样的问题时，请设置一个jsfiddle。

Answer 4

显示flex help's u

 .corpo{
 font-family: 'Roboto', sans-serif;
 height: 400px;
 margin:200px 15px 30px 15px;
 text-align: center;
 display:flex;
  }
  .bloco{
 flex:1;
 display: inline-block;
 margin:15px 5% 15px 5%;
 width:300px;
 height: 350px;
 border-style: solid;
 border-width: 3px;
 border-color: grey;
  }

DEMO HERE

无法将框对齐到同一行

4 个答案: