9

タイポグラフィ指向の wordpress テーマ [1] を開発していますが、インライン画像で問題が発生しています。

すべての要素を制御し、行の高さ、下マージン、ecc を調整して、垂直のリズムを保つことができます。ただし、エディターを介して貼り付けられた画像は任意の高さになる可能性があるため、後続のすべてのコンテンツを明らかに混乱させます。

したがって、問題は、マージン、パディング、両方、または別のソリューションを使用して、画像サイズに関係なくベースラインに調整できるかどうかです。

すべての画像を行の高さの倍数にするなど、いくつかの選択肢があることを知っています。そうすれば、リズムを保つことができます。他のオプションはjavascriptを使用することですが、理想的ではありませんが、cssソリューションがない場合は検討する必要があります.

[1] ご覧のとおり、これはワードプレスの問題ではなく CSS 関連の問題です。そのため、この質問をここに投稿しています。

4

6 に答える 6

8

(編集済み -- 新しく改善されたソリューション)

WordPress が画像の周りにラッパー div を生成する方法を提供しているかどうかはわかりませんが、そうであれば、これは機能するはずです。さまざまなテキスト スケールと画像サイズに直面してもかなり堅牢ですが、画像の高さまたは短さに応じて、生成されたコンテンツ文字列の長さを調整する必要がある場合があります。

これが機能する方法は、負のマージンを使用して外側の画像ラッパーを内側のラッパーよりも十分に広くすることです。これにより、改行されない 1 つのスペースが 1 行に収まってから折り返しが発生し、次の文字列が生成されます。下の行にこぼれる前に、一度に 1 行ずつ右端を埋めていく非改行スペースと通常のスペースを交互に配置します。最後に、1 行の高さに等しい負のマージンは、画像の下の部分的に塗りつぶされたスペースの行を相殺します。

<!DOCTYPE html>
<html>
  <style>
    html {
        line-height: 1.25em;
    }
    .p {
        margin: 0;
        padding: 0;
    }
    .section,
    .imginner {
        width: 20em;
    }
    .section {
        float: left;
        margin: 0.5em;
        background-color: #eeeeff;
    }
    .fakeimage {
        background-color: #ffeeee;
    }
    .imgouter {
        margin-right: -0.5em;
        background-color: #eeffee;
        margin-bottom: -1.25em; /* minus 1 line-height */
    }
    .imgouter:after {
        content:'\00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0  \00a0'
    }
    .imginner {
        float: left;
        background-color: #ffffdd;
    }
  </style>
<head>
</head>
<body>
  <div class='section'>
    Some text text text text text text.
    Some text text text text text text.
    <div class='imgouter'>
      <div class='imginner'>
        <div class='fakeimage' style="width:145px; height:92px">
          (image here)
        </div>
      </div>
    </div>
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
  </div>
  <div class='section'>
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
    Some text text text text text text.
  </div>
</body>
</html>
于 2011-02-14T01:01:21.087 に答える
1

@PaBLoX、CSSだけで垂直リズムを実現できると思います。本当の問題は、「CSSだけを使用して再利用可能な垂直リズム定型文を作成できるか」ということです。プロジェクトごとに異なり、使用するフォントファミリも異なります。垂直方向のリズムは入力によって駆動される数学に基づいていると想定されていますが、変数はプロジェクトごとに異なります。ショッピングサイトでは「ブログスタイル」の垂直リズムは必要ないかもしれません...

いずれにせよ、この質問が出されてからしばらく経ちますが、あなたや他の誰かが垂直リズムの定型文を作成する例（試み）を見たい場合は、githubのリポジトリhttps：//githubをご覧ください。 com / jonschlinkert / vertical-rhythm

それが出発点です。プロジェクトは、最終的にはさまざまなニーズに対応するいくつかの異なる定型文で構成されると思います。

于 2012-10-20T14:19:03.417 に答える
1

これを純粋に CSS で行いたい場合は、事前に各画像のサイズを把握しておく必要があります。たとえば、このデモでは:

スクリーンショット

20px のグリッドがあり、画像の高さが 150px であるため、画像を高さ 160px のコンテナーにラップしました。これには追加のマークアップが必要です。

<div class=figure>
  <div class=image-wrap style="height:160px">
    <img width=150 height=150>
  </div>
  <p class=caption>Figure 1
</div>

おそらく、そのようなマークアップは、画像マークアップと最小の高さを受け取り、グリッドに合わせたdivラッパーを出力する WordPress プラグインによって生成される可能性があります。（ワードプレスはよくわかりません。）

別の方法として、JavaScript を使用することもできます。これについては、この同様の質問で説明されています。

于 2011-02-14T00:56:35.523 に答える
1

私の意見では、純粋な css ソリューションは不可能です。テーブルを例にとってみましょう。表のセルには、デフォルトで少しパディングがあるため、内容が読みやすくなっています。各表のセルを正確に正しい高さにしようとすることもできますが、それは難しいでしょう。また、たとえば下の境界線を追加すると、要素の高さも追加されます。つまり、それを考慮する必要があります。Compass の垂直リズム ツールが垂直リズムを維持するのに役立つ方法が気に入っていますが、インライン イメージやたとえばテーブルの場合、純粋な CSS が不足していることに気付きました。そのため、これに役立つ簡単な jquery プラグインを作成しました。

唯一の欠点は、インライン要素が機能するためにオフセットが必要になることです。それを自動化できるかどうかはまだわかりません。テストすることによってのみ見つけることができるオフセットです。オフセット 6 (デフォルト) が 21 ～ 24 ピクセルのベースラインに最適であることがわかりましたが、font-size が影響している可能性があります。今のところ、概念実証として、非常にうまく機能することがわかりました。レスポンシブ画像 (window.resize) でも機能します。お役に立てれば。

于 2013-02-23T11:16:15.033 に答える
1

これが機能することを保証することはできませんが、試してみる価値があるかもしれません:

すべての画像の高さが で指定されていることを保証できる場合emは、要素の font-size をimgと同じに設定line-heightして、適切に挿入されたすべての画像が適切なサイズであることを確認できます。

html
{
  font-size: 15px;
  line-height: 18px;
}

img
{
  font-size: 18px;
  line-height: 18px;
}

または、画像が正しいリズムで折り返されるように、段落内で画像をフローティングすることもできます。

<p><img ... /> Lorem ipsum dolor sit amet...</p>

そして最後に、このメソッドを実装するために狂わなければならない純粋な CSS は次のとおりです。

  1. 使用している行間を計算します
  2. ピクセル全体に出てくることを確認してください (そうでなければ、これは機能しません)。
  3. すべての高さが均一に指定されていることを確認してください: <img height="100"vs<img height="100px"
  4. わいせつな数の CSS ルールを記述します。
img[height$="1"]
{
  margin-bottom: 9px;
}
img[height$="2"]
{
  margin-bottom: 8px;
}
...etc...

これは 10 や、その他の 10 と 5 の倍数に対しては問題なく機能しますが、それ以外のほとんどすべてに対しては大変な作業になることに注意してください。

于 2011-02-15T18:27:30.080 に答える
0

これを支援するために、Foundation や Bootstrap などの CSS フレームワークと Compass+SCSS を使用することをお勧めします。私は実際に、箱から出してすぐに使用できる適切な垂直リズム ルール セットを使用して Foundation をセットアップする作業を行いました。それを説明するブログ投稿があり、Github のプルリクエストへのリンクがあります。

http://lucisferre.net/2012/10/08/getting-into-vertical-rhythm/

これにより、タイポグラフィやその他のページ要素用の適切なベース CSS を生成できます。または、この手法を既存の CSS に適用することもできます。少し面倒ですが、それほど難しいことではありません。

于 2012-10-09T04:47:46.087 に答える