質問編集履歴

1

フレックスボックスを使って再度やってみました。

2021/04/14 08:55

投稿

isykzk
isykzk

スコア6

test CHANGED
File without changes
test CHANGED
@@ -347,3 +347,321 @@
347
347
 
348
348
 
349
349
  ```
350
+
351
+
352
+
353
+
354
+
355
+ フレックスにて改めてやってみました。
356
+
357
+ ```ここに言語を入力
358
+
359
+ <div id="main">
360
+
361
+ <div id="content"> 
362
+
363
+ <p><font size="3">東京ビートルズオフィシャルストアへようこそ。公式グッズ、CD、リマスター盤、ポスタ<br>ーの販売サイト</font></p>
364
+
365
+ </div>
366
+
367
+ <h2>Beatle News</h2>
368
+
369
+ <?php query_posts ('showposts=2&cat=2');
370
+
371
+ while(have_posts()):the_post(); ?>
372
+
373
+
374
+
375
+ <div id="section">
376
+
377
+ <div id="thumb">
378
+
379
+ <?php the_post_thumbnail(); ?>
380
+
381
+ </div>
382
+
383
+
384
+
385
+ <div id="desc">
386
+
387
+ <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
388
+
389
+ <?php the_excerpt(); ?>
390
+
391
+ </div>
392
+
393
+ <?php endwhile; ?>
394
+
395
+   </div>
396
+
397
+ </div>
398
+
399
+
400
+
401
+ <div id="right">
402
+
403
+ <h2>Live Schedule</h2>
404
+
405
+ <div id="right-main">
406
+
407
+ <ul>
408
+
409
+ <li><a href="a">7月20日東京 武道館</a></li>
410
+
411
+ <p>A席: 9800円 B席: 7000円</p>
412
+
413
+ <li><a href="a">7月24日横浜アリーナ</a></li>
414
+
415
+ <p>A席: 9800円 B席: 7000円</p>
416
+
417
+ <li><a href="a">7月30日幕張ロッテスタジアム</a></li>
418
+
419
+ <p>A席: 9800円 B席: 7000円</p>
420
+
421
+ </ul>
422
+
423
+ </div>
424
+
425
+ <div>
426
+
427
+ </div>
428
+
429
+ ```
430
+
431
+
432
+
433
+ ```ここに言語を入力
434
+
435
+ body{
436
+
437
+ margin: 0;
438
+
439
+ background-image: url("images/bg.jpg");
440
+
441
+ font-size: 12px;
442
+
443
+ }
444
+
445
+
446
+
447
+ #wrapper{
448
+
449
+ background: white;
450
+
451
+ width: 1000px;
452
+
453
+ margin: 0 auto;
454
+
455
+ height: 1050px;
456
+
457
+ }
458
+
459
+
460
+
461
+ h1 {
462
+
463
+ padding-left: 20px;
464
+
465
+ font-size: 30px;
466
+
467
+ }
468
+
469
+
470
+
471
+ #photo {
472
+
473
+ text-align: center;
474
+
475
+ }
476
+
477
+
478
+
479
+ #content p {
480
+
481
+ padding-left: 20px;
482
+
483
+ }
484
+
485
+
486
+
487
+ #header{
488
+
489
+ clear: both;
490
+
491
+ padding-top: 5px;
492
+
493
+ margin: 0 auto;
494
+
495
+ }
496
+
497
+
498
+
499
+ #header ul{
500
+
501
+ overflow: hidden;
502
+
503
+ padding-left: 5px;
504
+
505
+ margin: 0 auto;
506
+
507
+ }
508
+
509
+
510
+
511
+ #header li{
512
+
513
+ list-style: none;
514
+
515
+ font-size: 20px;
516
+
517
+ padding-bottom: 10px;
518
+
519
+ margin-left: 20px;
520
+
521
+ float: left;
522
+
523
+ font-weight:bold;
524
+
525
+ }
526
+
527
+
528
+
529
+ #top{
530
+
531
+ margin-left: 20px;
532
+
533
+ }
534
+
535
+
536
+
537
+ h2{
538
+
539
+ font-size: 25px;
540
+
541
+ margin-left: 20px;
542
+
543
+ margin-top: 0;
544
+
545
+ }
546
+
547
+
548
+
549
+ #top-jpg{
550
+
551
+ width: 960px;
552
+
553
+ height: 250px;
554
+
555
+ margin-bottom: 0;
556
+
557
+ padding-bottom: 0;
558
+
559
+ }
560
+
561
+
562
+
563
+ #desctiption p {
564
+
565
+ padding-left: 20px;
566
+
567
+ margin-top: 0;
568
+
569
+ }
570
+
571
+
572
+
573
+ #right-main h2{
574
+
575
+ border-bottom: 1px solid gray;
576
+
577
+ }
578
+
579
+
580
+
581
+ #right-main ul{
582
+
583
+ list-style: none;
584
+
585
+ }
586
+
587
+
588
+
589
+ #right-main li{
590
+
591
+ font-size: 19px;
592
+
593
+ font-weight: 800;
594
+
595
+ }
596
+
597
+
598
+
599
+ #right-main p{
600
+
601
+ font-size: 15px;
602
+
603
+ }
604
+
605
+
606
+
607
+ #footer{
608
+
609
+ clear: both;
610
+
611
+ }
612
+
613
+
614
+
615
+ #footer-wrapper{
616
+
617
+ background: #DBDBDB;
618
+
619
+ width: 900px;
620
+
621
+ height: 120px;
622
+
623
+ margin-left: 50px
624
+
625
+ }
626
+
627
+
628
+
629
+ #footer p{
630
+
631
+ padding-top: 60px;
632
+
633
+ text-align: center;
634
+
635
+ font-size: 15px;
636
+
637
+ }
638
+
639
+
640
+
641
+ #section {
642
+
643
+ display: flex;
644
+
645
+ }
646
+
647
+
648
+
649
+ #desc {
650
+
651
+ width: 300px;
652
+
653
+ }
654
+
655
+
656
+
657
+ ```
658
+
659
+
660
+
661
+ としてみたのですが、希望通りになりません。
662
+
663
+ 現在の表記状況は下記の状態なのですが、どうしたら
664
+
665
+ 「ビートルズがやってきたヤァヤァヤァ!」の記事部分を2段にできるでしょうか?
666
+
667
+ アドバイスいただければ幸いです。