HTML・CSS　４つ窓のレイアウト

上記のようなレイアウトにしたいと思っているのですが、CSSでfloatかけたりましたが、うまく行きません。
どなたか、CSSで上記のレイアウトとなるよう記述をしていただけないでしょうか。

↓HTMLの記述（現状縦並びになっております）

HTML
1<div class="news-wrapper">
2    <h2>NEWS</h2>
3  <div class="container">
4    <div class="new-contents">
5      <article>
6       <a href=https://www.google.co.jp/webhp?hl=ja&sa=X&ved=0ahUKEwikytKOhPjcAhXLvLwKHUD4CVkQPAgD><img src="css/img/img1.jpg" alt="link" width="20%" height="20%" align="top"></a>
7      <div class="news-lay">
8      <time datetime="2011-01-12">January 12th, 2011</time>
9      <h2><a href= "entry99.html">海釣り</a></h2>
10      <p>今日は海釣りに出掛けた…</p>
11      </div>
12    </article>
13     <a href=https://www.google.co.jp/webhp?hl=ja&sa=X&ved=0ahUKEwikytKOhPjcAhXLvLwKHUD4CVkQPAgD><img src="css/img/img1.jpg" alt="link" width="20%" height="20%" align="top"></a>
14    <div class="news-lay">
15      <time datetime="2011-01-12">January 12th, 2011</time>
16      <article>
17      <h2><a href= "entry99.html">海釣り</a></h2>
18      <p>今日は海釣りに出掛けた…</p>
19    </article>
20    </div>
21    <a href=https://www.google.co.jp/webhp?hl=ja&sa=X&ved=0ahUKEwikytKOhPjcAhXLvLwKHUD4CVkQPAgD><img src="css/img/img1.jpg" alt="link" width="20%" height="20%" align="top"></a>
22    <div class="news-lay">
23      <time datetime="2011-01-12">January 12th, 2011</time>
24      <article>
25      <h2><a href= "entry99.html">海釣り</a></h2>
26      <p>今日は海釣りに出掛けた…</p>
27    </article>
28    </div>
29     <a href=https://www.google.co.jp/webhp?hl=ja&sa=X&ved=0ahUKEwikytKOhPjcAhXLvLwKHUD4CVkQPAgD><img src="css/img/img1.jpg" alt="link" width="20%" height="20%" align="top"></a>
30    <div class="news-lay">
31      <time datetime="2011-01-12">January 12th, 2011</time>
32      <article>
33      <h2><a href= "entry99.html">海釣り</a></h2>
34      <p>今日は海釣りに出掛けた…</p>
35    </article>
36    </div>
37    
38  </div>
39</div>

大変お手数おかけいたしますが、以上、よろしくお願いいたします。

m.ts10806

2018/08/19 00:36

タイトルが質問内容の要件と一致しません。合わせてもらえると見ている人が困惑しなくて済みますので調整してください。

m.ts10806

2018/08/19 01:53

試してみたCSSも提示してください。また、リンクにfile:/// から始まる指定がありますが、Webサーバー上では正常に動作しない可能性があります。指定のhtmlからの相対パスを検討してください(ローカルPCのパス情報なので公に出すことも問題ありですが)

行動規範の内容に同意します

回答2件

あえて丸ごと回答しません。

CSS Flexbox
CSS Grid Layout

これらのキーワードで調べてみてください。
やりたいことが実現できます。

投稿2018/08/19 02:40

spookybird

総合スコア1803

tattakahiiii

2018/08/20 10:53

ご回答ありがとうございました。

行動規範の内容に同意します

ベストアンサー

Flexboxで。
一応レスポンシブ対応もしてますが、最低限の実装です。
HTML構造もキレイにしておきました。
IE対応他が必要かもしれません。

html
1<!doctype html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<title>サンプル：４つ窓のレイアウト</title>
6		<style>
7		* {
8			box-sizing: border-box;
9		}
10		@media (min-width: 64rem) {
11			.container {
12				max-width: 64rem;
13				margin-right: auto;
14				margin-left: auto;
15			}
16		}
17
18		.news {}
19			.news__header {
20				text-align: center;
21			}
22			.news__body {
23				display: flex;
24				flex-wrap: wrap;
25			}
26				.news__article {outline: 1px solid silver;
27					display: flex;
28					flex-direction: row-reverse;
29					padding: 1rem;
30				}
31				@media (min-width: 48rem) {
32					.news__article {
33						width: 50%;
34					}
35				}
36					.news__article__body {
37						display: flex;
38						flex-direction: column;
39						width: 60%;
40						margin-left: 5%;
41					}
42						.news__article__body h2 {
43							order: 1;
44							margin-top: 0;
45							margin-bottom: 0;
46						}
47						.news__article__body time {
48							order: 0;
49						}
50						.news__article__body p {
51							order: 2;
52						}
53					.news__article > a {
54						width: 35%;
55					}
56						.news__article__img {
57							display: block;
58							max-width: 100%;
59						}
60		</style>
61	</head>
62
63
64
65	<body>
66
67		<!-- https://teratail.com/questions/141917 -->
68
69		<div class="container">
70			<article class="news">
71
72				<h2 class="news__header">NEWS</h2>
73
74				<div class="news__body">
75					<div class="news__article">
76						<div class="news__article__body">
77							<h2><a href="#">海釣り</a></h2>
78							<time datetime="2011-01-12">January 12th, 2011</time>
79							<p>今日は海釣りに出掛けた…</p>
80						</div>
81						<a href="#">
82							<img class="news__article__img" src="http://dummyimage.com/320x320/CCC/fff.png&text=代替テキスト" alt="">
83						</a>
84					</div>
85					<div class="news__article">
86						<div class="news__article__body">
87							<h2><a href="#">海釣り</a></h2>
88							<time datetime="2011-01-12">January 12th, 2011</time>
89							<p>今日は海釣りに出掛けた…</p>
90						</div>
91						<a href="#">
92							<img class="news__article__img" src="http://dummyimage.com/320x320/CCC/fff.png&text=代替テキスト" alt="">
93						</a>
94					</div>
95					<div class="news__article">
96						<div class="news__article__body">
97							<h2><a href="#">海釣り</a></h2>
98							<time datetime="2011-01-12">January 12th, 2011</time>
99							<p>今日は海釣りに出掛けた…</p>
100						</div>
101						<a href="#">
102							<img class="news__article__img" src="http://dummyimage.com/320x320/CCC/fff.png&text=代替テキスト" alt="">
103						</a>
104					</div>
105					<div class="news__article">
106						<div class="news__article__body">
107							<h2><a href="#">海釣り</a></h2>
108							<time datetime="2011-01-12">January 12th, 2011</time>
109							<p>今日は海釣りに出掛けた…</p>
110						</div>
111						<a href="#">
112							<img class="news__article__img" src="http://dummyimage.com/320x320/CCC/fff.png&text=代替テキスト" alt="">
113						</a>
114					</div>
115				</div>
116
117			</article>
118		</div>
119
120	</body>
121</html>
122