0

ここに私が理解していないことがあります。まず私のコードとjsfiddle：

HTML:

<div id="appWrapper">
  <div id="app_logo">

  </div>
  <div id="app_text1">

  </div>
</div>

CSS:

div#appWrapper {
    padding: 1em;
    width: 80%;
    height: 85%;
    margin: auto;
    background-color: white;
}

div#app_logo {
    margin: 1em;
    height: 20em;
    width: 20em;
    background-color: #FFD300;
}

div#app_text1 {
    margin: 1em;
    height: 20em;
    width: 25em;
    background-color: #7109AA;
}

http://jsfiddle.net/JfMb2/embedded/result/

質問：

要素 app_text1 が app_logo 要素の下にあり、その右にないのはなぜですか?

右に配置するには、何を変更する必要がありますか?

4

3 に答える 3

3

要素 app_text1 が app_logo 要素の下にあり、その右にないのはなぜですか?

デフォルトでは、div 要素はブロック レベルであり、親の全幅を占めるためです。

右に配置するには、何を変更する必要がありますか?

左に浮かせます。

div#app_logo {
    margin: 1em;
    height: 20em;
    width: 20em;
    background-color: #FFD300;
    float:left;
}

jsFiddle の例

于 2013-10-29T21:00:08.350 に答える
0

他の人がすでに言ったように。Div はブロック要素で、デフォルトでは親の 100% の幅になります。インライン要素。インラインで表示され、コンテンツに合わせて幅が調整されます。あなたの場合、インラインブロックは完璧で、インラインとブロックの組み合わせです。スタイルを設定し、必要に応じて水平方向に配置するための div のように機能します。インラインブロック要素はページのフローティングを壊さないので、clear:bothその下に置く必要はありません。

を使用して最新のjsfiddleを確認してくださいdisplay:inline-block;

于 2013-10-29T21:10:07.280 に答える