私が取り組んでいる私のページはhttp://www.derekbeck.com/1775/excerpts/にあります
デスクトップ ブラウザーでは問題なく表示されますが、モバイルのスクリーンショットでは、以下のように強制的に折り返されます。（私の質問については、画像の下を参照してください...）
私はそれを優雅にラップしようとしましたが、2つの質問があります:
1) div inline-block (class="exnote2") のラップ方法を制御する CSS の方法はありWant the entire chapter?<BR>Sign up for the newsletter!ますか?
具体的には、私は欲しい：
1a)padding-left: 20px;以下のように 2 行目にある場合、その左側に存在しないこと (ただし、実際にすべてが 1 行にある場合は、PDF アイコンから 20px 離す必要があります)。
1b) div インライン ブロック (class="exnote2") の上に空白を追加して、「オンラインで読む」アイコンに近づかないようにします。ただし、padding-top または margin-top を追加すると、デスクトップ バージョン (上記のリンク) の適切なレイアウトに影響します。
価値があるのは、上記の 1b) について、画像に続くインライン ブロック全体、テキスト (class="exitemdetails") を含む div インライン ブロック全体のソリューションを一緒に判断するためです。私はこのようにしました：
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
ラインのために何かを仮装することもできましたWant the entire chapter?<BR>Sign up for the newsletter!が、条件が異なると期待どおりに表示されないのではないかと思います。したがって、CSS を使用して div のラップ方法を制御する方法と、それらがラップする場合にのみそれらの間の間隔を制御する方法など、より優れた、より洗練されたソリューションを期待してここに投稿します。
2) これに関連してもう 1 つ質問があります。十分なスペースがない場合に、本の表紙の画像を縮小する簡単な CSS の方法はありませんか? 私はこれを試しましたが、何もしません:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
ご覧いただきありがとうございます。デレク