1

私は CSS の専門家ではなく、可能であれば CSS のみを使用して Web ページのレイアウトを作成したいと考えていました。私が望むレイアウトは、2 つの div を持つことです。1 つはバナーを含み、もう 1 つはページのコンテンツを含み、コンテンツの左側にバナーがあります。ここまでは簡単です。バナー div には 2 つのサブ div が含まれます。1 つはページのタイトルを含み、もう 1 つは連絡先情報などの追加情報を含みます。繰り返しますが、それほど難しくありません。

タイトルに表示されるテキストを下から上に縦書きにしたい場合に問題が発生します。私はウェブ上でいくつかの検索を行い、私がやりたいことを行う CSS3 変換回転機能を見つけました。

#name {
  border: solid 1px black;
  background-color: yellow;
  height: 50px;
  font: normal normal bold 40px Helvetica, Arial, sans-serif;
  padding: 10px;
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(270deg);
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(270deg);
  -ms-transform-origin: left bottom;
  -ms-transform: rotate(270deg);
  -o-transform-origin: left bottom;
  -o-transform: rotate(270deg);
  transform-origin: left bottom;
  transform: rotate(270deg);
}

残念ながら、ブラウザーでテキストをレンダリングする場合、ブラウザーが回転したテキスト用に予約するスペースは、回転後のテキストの幅 (つまり、バナーの高さ) ではなく、回転する前のバナー テキストの幅です。回転前のバナー テキスト)。したがって、バナー div のすぐ隣に配置したいときに、コンテンツ div がページの外側に配置されています。

私の言いたいことを理解するには、このJSFiddleをチェックしてください。

2 つの div を並べて表示するにはどうすればよいですか?

JavaScript/jQuery を使用して幅や高さなどを計算し、それに応じてバナー div を移動する必要があるかもしれないと思うので、これは純粋な CSS ソリューションである必要はありませんが、純粋な CSS ソリューションは気の利いたものです。

4

2 に答える 2

0

ここにフィドルがあります：http: //jsfiddle.net/sijav/UDfZE/53/ これを行う必要があります。#bannerの最大幅を作成してください。

max-width:170px;

次に、display:block-inlineメインコンテンツにも入れます。これでうまくいくはずです。

于 2013-10-15T09:33:54.470 に答える