1
私はPタグとIMGタグを含むhtmlページを持っています。 と私は、IMGタグを囲む複数の列にPタグを表示したい。 CSSスタイルとHTMLを使用してthis picture のように。それを達成する方法を提案していただけますか？画像付き複数の列
ありがとうございます。
Q
画像付き複数の列
A
答えて
1
短い答えは：できません。少なくともp要素とimg要素ではなく、すべての主要なブラウザでサポートされている必要があります。
あなたが見たいかもしれませんが、ブラウザのサポートを気にしない場合：http://www.w3.org/TR/css3-multicol/
+0
私はそれがSafariでサポートされることを望みます。 –
+0
最新のWebkitのバージョンでこれがサポートされていると思いますが、サファリでhttp://www.quirksmode.org/css/multicolumn.htmlをチェックしてください。まだ、そのイメージの周りのテキストフローが挑戦になるだろう:) – xec
0
あなたが実際にスパンとのdivタグを使用して、しかし、そこにある。この目的のためにレイアウトを指定するには、Pタグを使用していませんあなたのpタグをdivに入れ、このdivコンテナに背景イメージを割り当てて、イメージの周りに段落を配置することができます。
また、960 grid systemというCSSを使用して列を作成するのに便利な方法を使用できます。ここでは例を示します。これは、あなたが記述したのとまったく同じ方法でpタグを並べ、どのブラウザーでも動作します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
/* 960 grid framework */
.container_12{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12{position:relative}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_3{width:220px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_6{width:460px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_9{width:700px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_12 .grid_12{width:940px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_3{padding-left:240px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_6{padding-left:480px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_9{padding-left:720px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_3{padding-right:240px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_6{padding-right:480px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_9{padding-right:720px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_3{left:240px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_6{left:480px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_9{left:720px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_3{left:-240px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_6{left:-480px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_9{left:-720px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1}
</style>
</head>
<body>
<div style="background: url(http://img64.imageshack.us/img64/9881/bbee.png) no-repeat 250px 0px;" class="container container_12 clearfix ">
<div class="grid_3">
<p style="text-align:justify;" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="grid_3">
<p style="text-align:justify; padding-top:316px">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, eirmod tempor sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="grid_3">
<p style="text-align:justify; padding-top:316px">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="grid_3">
<p style="text-align:justify;" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>
</html>
・ホープ、このヘルプおうち:)
1
ブラウザはCSS3 ExclusionsまたはCSS3 Positioned Floatsのようなものをサポートしている（または任意の結果までは、プレーンなHTMLとCSSでそれを行うできるようにするつもりはありませんそれらを合併することが判明した）。プロダクションブラウザはどちらもサポートしていませんが、prototypesとpreviewsが利用可能ですが、今のところJSベースのソリューションや別のアプローチが必要になるでしょう。
関連する問題
- 1. PHPMailerでの複数画像の添付
- 2. 画像付きカスタムリストビュー
- 3. 画像付きカスタムツールバー
- 4. 画像付きスライダー
- 5. 画像付きサイコロロール
- 6. glTexImage2D複数画像
- 7. リアクションネイティブレンダリング複数画像
- 8. UITableViewの複数の画像
- 9. RadTreeViewの複数の画像
- 10. ICOの複数の画像
- 11. cocos2dの画像付きアニメーション
- 12. Joomlaの画像付きメニュー
- 13. キャプション付きのサイドスクロール画像
- 14. 画像付きのカスタムUISwitch
- 15. 画像付きExpandableListAdapterのエラー
- 16. jQuery複数の画像アップローダー
- 17. 複数のマスク画像
- 18. Android ACTION_VIEW複数の画像
- 19. パン複数の画像simultaniosly
- 20. 複数の画像は
- 21. ランダムポジション複数の画像
- 22. 画像のタグ付けと複数のリンクの追加
- 23. ライトボックス付き画像付きGoogleマップ
- 24. iPhoneでメールに複数の画像を添付する
- 25. ファンシーボックスフォーマット1画像と複数のタイトルを付けます
- 26. C＃ダイ画像付きダイスアプリケーション
- 27. 画像アップローダー付きマルチステップフォーム
- 28. 画像付きJSFコマンドリンク
- 29. css3オン/オフスイッチ付き画像
- 30. 画像リンク付きSMS
テキストフローはすべての列を流れる必要がありますか？ – Joonas
はい、そうする必要があります。 –