0

私の問題の例については、このペンを参照してくださいhttp://codepen.io/MarkRBM/pen/EmlJC

今すぐ予約、購読、ヘッダーと段落を含む div とインラインで表示するための連絡先という 3 つの div を取得できません。私はしばらく試していて、learn layout.com を見てきました。これはより大きなプロジェクトの一部であり、フロートしようとしましたが、そうすると他のすべてのスタイリングが台無しになるので、インラインブロックを使用する方法が必要だと考えました

編集問題のcssが866〜894行目にある完全なscssファイルでペンを更新しました。あなたがそれを理解するにはあまりにも多くのことがうまくいかないかもしれません.

4

3 に答える 3

1

display:inline-block の後にセミコロンを追加するのを忘れました

.locbook{
  /*width: 49%;*/
  background-color: #3475b3;
  display: inline-block;
  vertical-align: top;
}
于 2013-07-17T19:00:54.327 に答える
1

はい、確かに可能です。あなたは正しい道を進んでいます。css のいくつかのエラー:

最初は.locinfois ですがinline-block、内部.locにあり、そうではありません (つまりblock、デフォルトではそうです) — 同様に に設定.locしinline-blockます。

inline-blockの定義の後にセミコロンもありません。.locbookこれにより、そのルールが無視されます。

結果がどのように見えるかを正確に知らなければ、修正が必要なものが他にあるかどうかわかりません。しかし、これらの変更は、少なくとも大部分は達成されているようです。

編集：コメントへの応答の詳細：

.locinfoはコンテナ内に単独で存在するため、幅を 49% ではなく 100% に設定します。重要なのは、これがコンテナのパーセンテージとしての要素の幅であるということです。そのコンテナー (a .loc) にはページの 49% が含まれているため、その.locinfo49% を指定すると、ページの 24% しか含まれません。

同様に、.locbook32% に設定します。これらの 3 つの div は、コンテナーのページの 49% に並んで配置されます。

最後に、vertical-align: topon.locとmargin: 0onを設定すると.locbook、すべてがうまく整列されます。

于 2013-07-17T18:58:32.020 に答える
0

それらをスパンに切り替えてみてください。div はデフォルトで {display: block} ですが、スパンは {display: inline} です。ブロック要素は、他の要素と同じ行に配置できません。ただし、インライン要素の幅を指定することはできません。その場合は、div または span のいずれかを選択してスタイルを設定する必要があります (実際には関係ありません)。{display: inline-block}

于 2013-07-17T18:53:25.023 に答える