22

私は、私が達成しようとしている外観に最適に機能する非常に単純なコードをいくつか持っています。boxContainerである外部div内に含まれる「ボックス」として表示される2つのdivがあります。ボックスを重ねるのではなく、並べて配置し、画面の中央に完全に配置します。ボックスの幅は、ブラウザの幅が小さくなる/大きくなるにつれて縮小/拡大します。ブラウザのウィンドウが小さすぎると、ボックスはページの中央に配置されたまま、上下に移動します。完全。

唯一の問題は、ボックスが上部ではなく下部に配置されていることです。2番目のボックスにはテキストが少ないため、ページをさらに下に押して、最初のボックスの下部に揃えます。代わりに上に揃えてほしい。

これはdisplay：inline-blockが原因だと思いますが、理由はわかりません。また、修正して上記と同じ機能を維持する方法もわかりません。

手伝って頂ければ幸いです!!

#boxContainer {
    width:80%;
    margin:0 auto;
    text-align:center;
}
.box {
    display:inline-block;
    width:35%;
    margin:20px;
    border:solid 5px;
    border-radius:40px;
}
<div id="boxContainer">
    <div class="box">
        <h3>BOX 1</h3>
        <p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
    </div>

    <div class="box">
        <h3>BOX 2</h3>
        <p>TEXT GOES HERE, blaha dlfjas fakfasldfjas fkdf lasfjwio we dklajdakfliwo wklw jdkas fdsaj fjdsfwoif ajkdl kdalfej woja dklf woef adkiweoj daljidw odal fjwe ewew kalwoie ea falk</p>
    </div>
</div>

写真

ここに画像の説明を入力してください

ありがとうございました！

4

2 に答える 2

61

ボックスはすでにあるので、スタイルinline-blockに追加できます。vertical-align: top.box

于 2012-12-01T18:42:04.737 に答える
13 

.box {
  display: inline-block;
  border: solid 1px;
  vertical-align: top;
  width: 40%;
}
<div id="boxContainer">
  <div class="box">
    <h3>BOX 1</h3>
    <p>Lorem ipsum dolor sit amet, altera interesset pri an. Et aeque interpretaris vel, at quo summo deleniti disputationi. Eu inimicus splendide duo, soleat intellegam ut per. Sint impedit recusabo ex vix, aliquid adipisci consequat no ius. Eu possim consequat eum, sea cu quaeque impedit, est fuisset accusamus definiebas ad.</p>
  </div>

  <div class="box">
    <h3>BOX 2</h3>
    <p>Viris eruditi consectetuer ei mea, eu nulla ridens officiis duo. In atomorum forensibus abhorreant quo, id nec aperiam dissentiet.</p>
  </div>
</div>

vertical-alignCSSプロパティを使用できます。

インライン要素とインラインブロック要素にのみ影響します。

これは、 vertical-alignに関する優れたリファレンスです。

于 2012-12-01T18:42:23.427 に答える