非常に単純なエラーですが、解決できません。以下のリンクをご確認ください。
http://inimitablesystems.com/demos/interactin/interactin
スライダーの下に「事業所」エリアがあります。画像アイコンとテキストの説明があります。テキストが画像の下に表示されないようにしたいのですが、画像の下にあるため、画像の後に配置されて表示されます。パディングも試しましたが、正しいノードに適用できない可能性があります。
問題を解決する方法を教えてください。
どうもありがとうございました。アフマド
あなたのコード ベースは既にstyle属性を使用しているので (私はまったく使用をお勧めしません!)、それらを使用したコード サンプルを示します。
@Sami のアプローチは、乱雑なwidth値が設定されていないため、コンテナ要素の幅の変更について心配する必要がなく、テキストの追加や削除について心配する必要がないため、最も望ましいソリューションです。
ただし、コードを再構築する必要のない簡単な修正を探している場合は、@Sami のアプローチを本当にお勧めしますが、いくつかあります。@Samiが応答を投稿する前に、私はすでにそれをタイプするという問題を経験したので、私は本当にこれを投稿しているだけです.
考えられる解決策の 1 つは、テキストを含む要素の幅を明示的に指定し、既にフローティングしている画像の横にフローティングすることです。
ここでの問題は、幅を明示的に指定するだけでなく、それをフローティングすることはかなり面倒で、維持するのが難しく (インライン スタイルを使用することは、すでに維持するのに十分困難です)、さらに潜在的な問題につながることです。
<p style="text-align: left; width: 375px;">
<em style="font-style:normal; display:block; width:273px; float:left;">INTERACTin was established 2 years ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of ago.Currently employs a total of 40-50 staff. Offers 3 occupation types.<br> Operates across various Industries.</em>
</p>
考えられる別の解決策は、画像の下にパディングを追加して、ボックスがテキストを覆うのに十分なほど下に広がるようにすることです。
含まれる要素の幅が変更されたり、テキストが追加されたりすると、このアプローチは失敗します。繰り返しますが、これは維持を困難にします。
（!importantあなたのウェブサイトはすでに使用しているため、コードサンプルで使用する必要がありました。これは、一般に、特定のルールに従う!important場合はほとんど不要です。）
<img src="http://inimitablesystems.com/demos/interactin/assets/assets/img/events-icon.png" class="pull-left" style="padding-bottom:60px!important;">
このように施設のアーキテクチャをdivにしてください。
establishment div固定幅のメイン。次に、それestablishment divを 2 つのセクションに分割し"left-establishment"、"right-establishment"幅を 60% にします。このアプローチがあなたの問題を解決することを願っています。