ＨＰにて、文章と画像の配置構成がうまくいかない

解決済

質問者：hiro721
質問日時：2014/09/04 12:02
回答数：3件

下記のような構成でHTMLとcssを使用し、作ろうと試行錯誤しましたが
うまくいきません。
お手数ですが、わかる方いらっしゃいましたら、ご教授お願い致します。

(1)文章　　　　　　　　　　　　　　　　(2)文章
　文章　　　　　　　　　　　　　　　　　文章
　画像画像画像　　　　　　　　　　　画像画像画像

(3)文章　　　　　　　　　　　　　　　　(4)文章
　文章　　　　　　　　　　　　　　　　　文章
　画像画像画像　　　　　　　　　　　画像画像画像

(5)文章
　文章
　画像画像画像

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Ogre7077
回答日時：2014/09/04 14:09

<!DOCTYPE html>

<html lang=ja><meta charset=utf-8>
<style>
article { clear:both; }
article section { float:left; width:48%; min-width:300px; }
article.すこし格好よく section { position:relative; }
article.すこし格好よく section header { position:absolute; top:0px; left:0px; }
article.すこし格好よく section p { padding-left:2em; margin:0 0 1ex 0;}
</style>
<body>
<article>
<section><header><h2>(1)文章</h2></header><p>文章<p><img><img><img></p></section>
<section><header><h2>(2)文章</h2></header><p>文章<p><img><img><img></p></section>
<section><header><h2>(3)文章</h2></header><p>文章<p><img><img><img></p></section>
<section><header><h2>(4)文章</h2></header><p>文章<p><img><img><img></p></section>
<section><header><h2>(5)文章</h2></header><p>文章<p><img><img><img></p></section>
</article>
<article class=すこし格好よく>
<section><header>(1)</header><p>文章<p>文章<p><img><img></p></section>
<section><header>(2)</header><p>文章<p>文章<p><img><img></p></section>
<section><header>(3)</header><p>文章<p>文章<p><img><img></p></section>
<section><header>(4)</header><p>文章<p>文章<p><img><img></p></section>
<section><header>(5)</header><p>文章<p>文章<p><img><img></p></section>
</article>

何か特別な理由があって上手く表示できない場合は以下を追加
<script>(function(){for(var i=0,a="header section article".split(/ /);i<a.length;i++)document.createElement(a[i]);})()</script>
<style>article,section,header { display:block; }</style>