ボックスを同じ行に配置できません

Question

これらの2つのボックスを同じ行に並べることはできません。何が間違っているのですか？それはインラインブロックを持つもののようです。内容を無視してください。

.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> 
 
      \t <form> 
 
      \t \t <br><br> 
 
      \t \t <a><label id="file" for="selecao-arquivo">Selecionar arquivo</label> 
 
    \t \t \t \t <input id="selecao-arquivo" type="file"></a> 
 
    \t \t \t \t <br><br> 
 
    \t \t \t \t <input type="button" value="Baixar"> 
 
      \t </form> 
 
      </div> 
 
     </div> \t 
 
     <div class="bloco"> 
 
      <div class="cabecalho-bloco"><h3 style="font-weight: bold;">Promoção</h3></div> 
 
      <div> 
 
      \t <form> 
 
      \t \t <br><br> 
 
      \t \t <input type="text" placeholder="Produto"> 
 
      \t \t <br><br> 
 
      \t \t <input type="button" value="Consultar"> 
 
      \t </form> 
 
      </div> 
 
     </div> 
 
    </div><!-- Fim blocos -->

Answer 1

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

あなたは多くのデバイス

Answer 2

まず第一を使用することができ、それは単なる厄介だ、オフセットする<br>を使用していない

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

ブートストラップ列を使用問題を尋ねる私がそれを言っているのは、なぜなら、すべての異なるWebブラウザが、自分の魔法の魔法を使って、垂直ピクセルの数を計算するからです。

.blocoクラスでは、float:left;パラメータを追加します。

次回このような質問をするときは、jsfiddleを設定してください。

Answer 3

表示フレックスヘルプの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

Answer 4

デフォルトの垂直配向はvertical-align: baselineなので、ブラウザは、ブロックのベースラインを揃えます。この場合、第1のラベルは第2のラベルの入力を有する。
解決策はブロックに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>を除去する自由を取りました。