元々以下のように実装しておりました。
#lazy_fold(コンテンツ1){{
コンテンツ1内容
}}
#lazy_fold(コンテンツ2){{
コンテンツ2内容
}}
今回はlazy_foldの後ろにpickup!などのアイコンを添えたいと考えています。
+コンテンツ1 pickup!
+コンテンツ2
最初はlazy_foldと画像をflex_boxで並べることで対応したのですが。
+コンテンツ1 pickup!
+コンテンツ2
このように次のlazy_foldとの間に改行が1つ多く入ってしまう点と、コンテンツ1とアイコンの位置関係が悪くなる点が気になり、
cssboxで成形する措置を取ることにしました。
#cssbox(margin: 0px;padding: 0px;width: 300px;height: 29px;){{
#flex_container(flex-start,,wrap){{{{
#flex_box{{{
#lazy_fold(コンテンツ1){{
コンテンツ1内容
}}
}}}
#flex_box{{{
#cssbox(margin-left: -8px; padding: 2px;){{
&ref(編集素材/pickup!.gif,nolink);
}}
}}}
}}}}
}}
#lazy_fold(コンテンツ2){{
コンテンツ2内容
}}
※数値は単なる座標の調整用です。
一旦見た目上は上手く表示できたのですが、この編集内容だと問題がありました。
コンテンツ1を展開した際に、コンテンツ2が下に移動する動作をせず、
コンテンツ1内の文章がコンテンツ2に干渉してしまいました。
明らかにcssboxの使い方の問題ですが、どのようなアプローチをすればよいか分からなくなってしまいました。
助言頂けると幸いです。
通常のfoldでしか試していませんが、画像の配置を細かく決めるわけでなければ
で画像が表示されます。
cssboxに関してはコンテンツ1内容をも含めた範囲が対象になっており、
その上で height: 29px; と縦幅が固定されている点が原因ではないかと思います。
min-height: 29px; にして縦幅の下限だけを指定してあげれば解決すると思います。
ありがとうございます。
1つ目のやり方で概ね期待通りの表示になりました。
ダブルクォーテーションで囲む記述に気づかなかったせいで、えらく遠回りをしていましたね。
cssboxに関してはコンテンツ1とコンテンツ2の間に隙間が出来てしまい、上手くいきませんでした。
教えていただいた方法を参考にうまく調整出来ないかもう少し見てみようと思います。