Html 要素を横並びにしたい。

前提・実現したいこと

div 要素を横並びにしたい。

発生している問題

div 要素が縦に並んでしまう。

サイズの問題なのでしょうか?

該当のソースコード

HTML
1<section id="contents">
2  <section id="wrapper" class="con clearfix"> 
3    <section id="main">
4      <div class="section">
5				<!--01-->
6				<div class="ac" id="ac01">
7					<div class="ac_title">
8						<a href="#" class="noscroll">
9							<div class="txt">
10								<span class="en num">01</span>
11								<h4>Link 1</h4>
12							</div>
13						</a>
14					</div>
15				</div>
16				<!--02-->
17				<div class="ac" id="ac02">
18					<div class="ac_title">
19						<a href="#" class="noscroll">
20							<div class="txt">
21								<span class="en num">02</span>
22								<h4>Link 2</h4>
23							</div>
24						</a>
25					</div>
26				</div>
27				<!--03-->
28				<div class="ac" id="ac03">
29					<div class="ac_title">
30						<a href="#" class="noscroll">
31							<div class="txt">
32								<span class="en num">03</span>
33								<h4>Link 3</h4>
34							</div>
35						</a>
36					</div>
37				</div>
38				
39				<!--04-->
40				<div class="ac" id="ac04">
41					<div class="ac_title">
42						<a href="#" class="noscroll">
43							<div class="txt">
44								<span class="en num">04</span>
45								<h4>Link 4</h4>
46							</div>
47						</a>
48					</div>
49				</div>
50      </div>
51    </section><!--main-->
52  </section><!--wrapper-->
53</section><!--contents-->
54

css
1@charset "UTF-8";
2
3@import url('https://fonts.googleapis.com/css?family=Karla');
4
5* {
6  box-sizing:border-box;
7  /* tap */
8  -webkit-tap-highlight-color: rgba(0,0,0,0);
9  -webkit-box-shadow: none;
10  box-shadow: none;   
11  outline: none;
12}
13*:focus { outline: none; }
14
15html { overflow-y:scroll; }
16body {
17	width:100%; margin:0; padding:0;
18	text-align:center; font-size:15px; line-height:1.7; letter-spacing:0.05em;
19	color:#000;
20	font-family: "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
21	background:#fff;
22}
23
24ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, h7, form, p { margin:0; padding:0; }
25img { border:0; }
26li { list-style-type:none; }
27
28a { overflow:hidden; -webkit-transition:.2s linear; -moz-transition:.2s linear; -o-transition:.2s linear; transition:.2s linear; }
29a:link		{ color:#000; text-decoration:none; }
30a:visited	{ color:#000; }
31a:hover		{ color:#cc141c; }
32a:active	{ color:#cc141c; }
33a img {
34	-webkit-transition:.2s linear;
35	-moz-transition:.2s linear;
36	-o-transition:.2s linear;
37	transition:.2s linear; }
38a.fade:hover img { opacity:0.7; }
39
40a.underline { text-decoration:underline; color:#cc141c; }
41a.underline:hover { color:#cc141c; }
42a.blank:after {
43	content:""; display:inline-block; width:15px; height:11px; margin-left:5px;
44	background:url("../img/blank.png") 0 0 no-repeat; background-size:15px 11px; }
45a.blank:hover:after { background:url("../img/blank_r.png") 0 0 no-repeat; background-size:15px 11px; }
46a.arrow:before {
47	content:""; display:inline-block; width:5px; height:10px; margin:0 8px;
48	background:url("../img/arrow_right_b.png") 0 0 no-repeat; background-size:5px 10px; }
49a.arrow:hover:before { background:url("../img/arrow_right_r.png") 0 0 no-repeat; background-size:5px 10px; }
50
51img { max-width:100%; height:auto; vertical-align:top; }
52
53/* clearfix */
54.clearfix:after {  
55	visibility: hidden;  
56	display: block;  
57	font-size: 0;  
58	content: " ";  
59	clear: both;  
60	height: 0;  
61}  
62* html .clearfix { zoom: 1; } /* IE6 */  
63*:first-child+html .clearfix { zoom: 1; } /* IE7 */  
64
65.txt_c { text-align:center; }
66.txt_l { text-align:left; }
67.txt_r { text-align:right; }
68
69.clear { clear:both; }
70.hidden { visibility:hidden; }
71
72.serif { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
73.en    { font-family: Karla, Century Gothic, Futura,sans-serif; }
74.bold  { font-weight:bold; }
75.big   { font-size:120%; }
76.small { font-size:88%; }
77.red   { color:#df003a!important; }
78.white { color:#fff!important; }
79.black { color:#000!important; }
80
81
82body.fixed { position:fixed; width:100%; height:100%; }
83.con { position:relative; margin:auto; }
84
85/* common */
86p { margin-bottom:20px; }
87p:last-child { margin-bottom:0; }
88.con { position:relative; text-align:left; }
89
90.all { text-align:right; margin:-20px 0 50px; font-size:14px; letter-spacing:0.075em; }
91.all a:after { content:""; display:inline-block; width:20px; height:6px; margin-left:10px; background:url("../img/arrow_b.png") 0 0 no-repeat; }
92.all a:hover:after { background:url("../img/arrow_r.png") 0 0 no-repeat; }
93
94/* footer */
95footer { padding-bottom:40px; text-align:center; position:relative; }
96
97footer .office { /*background:url("../img/foot_support_bg.jpg") center no-repeat; background-size:cover;*/ background:#eeeded; }
98footer .KB { /*background:url("../img/foot_contact_bg.jpg") center no-repeat; background-size:cover;*/ background:#eeeded; }
99footer .inquiry { text-align:center!important; }
100footer .inquiry h2 { position:relative; margin-bottom:50px; padding-bottom:22px; font-size:14px; font-weight:normal; letter-spacing:0.2em; }
101footer .inquiry h2 i { display:inline-block; font-style:normal; font-size:52px; font-weight:normal; line-height:1; margin-bottom:30px; }
102footer .inquiry h2:after { content:""; display:block; width:38px; height:1px; background:#cc141c; position:absolute; bottom:0; left:50%; margin-left:-19px; }
103footer .inquiry a { display:block; width:100%; height:70px; line-height:70px; font-size:16px; background:#fff; }
104footer .inquiry a:hover { background:#cc141c; color:#fff; }
105
106footer .biglink li a { display:block; width:100%; height:100%; text-indent:-9999px; }
107footer .biglink li:nth-child(1) a { background:url("../img/footlink01.png") center no-repeat #000; }
108footer .biglink li:nth-child(1) a:hover { background-color:#cc141c; }
109footer .biglink li:nth-child(2) a { background:url("../img/footlink02.png") center no-repeat; }
110footer .biglink li:nth-child(2) a:hover { background-color:#eeeeee; }
111footer .biglink li:nth-child(3) a { background:url("../img/footlink03.png") center no-repeat; }
112footer .biglink li:nth-child(3) a:hover { background-color:#eeeeee; }
113
114@media (min-width: 769px) {
115  .sp { display:none; }
116	.con { width:1280px; }
117
118  footer .inquiry > div { width:49%; padding:90px 20px 80px; }
119  footer .office { float:left; }
120  footer .KB { float:right; }
121  footer .inquiry > div > div { display:inline-block; width:80%; min-width:420px; }
122  /*footer .office li:nth-child(1) { float:left; width:46.5%; margin-bottom:30px; }
123  footer .office li:nth-child(2) { float:right; width:46.5%; margin-bottom:30px; }
124  footer .office li:nth-child(3) { clear:both; width:70%; margin:auto; }*/
125  footer .office ul { padding:0 15%; }
126  footer .office li:nth-child(2) { margin-top:30px; }
127  footer .KB ul { padding:0 15%; }
128  footer .KB li:nth-child(2) { margin-top:30px; }
129  
130  footer .biglink { margin-top:80px; }
131  footer .biglink li { float:left; width:33.333%; height:90px; }
132  footer .biglink li:nth-child(2) a,
133  footer .biglink li:nth-child(3) a { border:1px solid #d5d5d5; border-left:0; }
134}
135
136/* btn_menu animation */
137@-webkit-keyframes active-menu-bar02 {
138	100% { height: 0; }
139}
140@keyframes active-menu-bar02 {
141	100% { height: 0; }
142}
143
144
145
146
147
148
149
150
151#contents { padding:35px 0 100px;}
152#wrapper { font-size:14px; }
153
154/* 見出し（グレー背景） */
155.h3_bg { margin-bottom:30px; padding:20px 0; background:#ececec; } /* 横幅100％ */
156.h3_bg h2, .h3_bg h3 { font-size:18px; font-weight:bold; letter-spacing:0.1em; line-height:1; }
157.h4_bg { margin-bottom:20px; padding:20px 17px; font-size:16px; font-weight:bold; letter-spacing:0.1em; line-height:1; background:#ececec; } /* con内 */
158
159/* 囲み */
160div.section { padding:30px 0 90px; border-top:1px solid #dedede; width:33.333%; }
161div.section:first-child { padding-top:0; border-top:0; }
162div.section:last-child { padding-bottom:0; }
163.border_box { border:1p１１ slid #dbdbdb; padding:40px; }
164
165
166
167
168
169/* CSS Document */
170
171/* ===============================
172						ac
173=================================*/
174.ac { position:relative; }
175.ac + .ac { margin-top:24px; }
176.ac#ac05:after { content:none; }
177.ac_title a { display:flex; min-height:180px; background:#eeeded; color:#000; }
178.ac_title .txt { width:65%; padding:30px 30px 30px 130px; position:relative; }
179.ac_title .txt .num { color:#d5001e; font-size:30px; font-weight:700; letter-spacing:0.1em; position:absolute; top:31px; left:30px; }
180.ac_title .txt .num:before { content:""; display:inline-block; width:19px; height:24px; margin-right:10px; vertical-align:-1px; background:url("/sites/jp000260/SiteAssets/SitePages/line.png") 0 0 no-repeat; background-size:contain; }
181.ac_title .txt h4 { font-size:32px; margin-bottom:10px; }
182.ac_title .txt p { font-size:16px; }
183.ac_title .txt p span { color:#d5001e; font-size:14px; }
184.ac_title .txt p span:after {
185	content:""; display:inline-block; width:8px; height:8px; margin-left:8px; border-right:1px solid #d5001e; border-bottom:1px solid #d5001e; transform:rotate(45deg); vertical-align:3px; }
186
187

試したこと

css
1#main { float:left; }
2.section { float:left; }

補足情報（FW/ツールのバージョンなど）

ターゲットブラウザ: Internet Explorer 11

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

回答2件

ベストアンサー

とりあえず下記のコードを追加すれば、横並びになります。

css
1#main > .section {
2  display: flex;
3}

現在では横並びはflexを使うのが主流です。

あとは、サイズをどうするのか、レスポンシブ対応はどうするか、でCSSを修正・追加することになります。

投稿2020/05/01 01:34

hatena19

総合スコア33699

BetterEveryday

2020/05/01 04:03

hatena19 さん、コードを回答いただきましてどうもありがとうございます。 flex で横並びになることを確認できました。たしかに、あとは各要素の横幅を広げたいのですが、.ac の width では効かないようです。どのように CSS を修正/追加すべきか、教示いただくことはできますか? お手数をお掛けしまして申し訳ございません。どうぞよろしくお願いいたします。

hatena19

2020/05/01 04:32

とりあえず、div.section の width: 33.333%; を削除してください。これがあるのでそれ以上幅が広がりません。あとは、どのようなレイアウトにしたいかですが、こちらではわかりませんので、下記等を参考にまずはご自身で書いてみてください。もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends https://webdesign-trends.net/entry/8148

BetterEveryday

2020/05/01 05:28

hatena19 さん、 Flexbox の使用方法解説 URL を紹介いただきましてどうもありがとうございます。子アイテムに flex-row を記述することで横幅を広げることができました。 hatena19 さんの助言は、私の悩みを直接解消する回答を簡潔に、かつ、初心者にも理解できるように伝えていただき、いつもとても助かっています。今回も私の理解のために貴重なお時間とお気持ちをいただきまして本当にどうもありがとうございました。

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