更新ができなかったので再投稿します。
画像の下に変な高さがついてしましました。解決方法のご教授をお願いします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5<meta charset="utf-8"> 6<link rel="stylesheet" href="css/style.css"> 7<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css"> 8</head> 9 10<body> 11 12<div class="wrapper"> 13<div class="container"> 14<header> 15<h1 class="header-title"><span>▼</span>My blog<span>▼</span></h1> 16<p class="header-content">If today were the last day of my life, would I want to do what I am about to do today?</p> 17</header> 18 19<div class="main"> 20<div class="blog"> 21 22<div class="blog-content"> 23<div class="img"><img src="img/blog1.jpg" class="img" height=auto></div> 24<div class="blog-title"> 25<h2 class="title">ブログタイトル</h2> 26<p class="date">2017/04/01</p> 27<p class="text">いつものことだが電車は満員だった。そしていつものことだが若者と娘が腰をおろしとしよりが立っていた。うつむいていた娘が立ってとしよりに席をゆずった。そそくさととしよりが坐った...</p> 28</div> 29 30</div> 31 32</div> 33<div class="sub"></div> 34 35</div> 36 37</div> 38 39</div> 40 41</body> 42 43</html> 44
css
1@charset "UTF-8"; 2 3body{ 4 background-image: url(img/bg.png); 5} 6 7.wrapper{ 8 margin:40px 0; 9 border:1px solid black; 10 background-color: white; 11 width: 1100px; 12 margin:auto ; 13 text-align: center; 14} 15 16.container{ 17 padding:70px 50px 80px 50px; 18 width:998px; 19 20} 21 22header{ 23 margin-bottom: 20px; 24} 25 26.header-title{ 27 color:black; 28 font-size: 50px; 29 font-family: cursive; 30 text-align: center; 31 margin-bottom: 20px; 32} 33 34span{ 35 color:yellowgreen; 36} 37 38.header-content{ 39 font-family: cursive; 40 padding:18px 0; 41 border-top:1px solid black; 42 border-bottom: 1px solid black; 43 text-align: center; 44} 45 46.main{ 47 margin-top: 60px; 48} 49 50.blog{ 51 margin-right: 48px; 52} 53 54.blog-content{ 55 border-bottom: 1px solid black; 56 width:700px; 57 display: flex; 58} 59 60 61 62 63.img{ 64 width: 280px; 65 float:left; 66 padding-bottom: 10px; 67 margin-right: 20px; 68 69} 70 71.blog-title{ 72 width:400px; 73 float:right; 74 75} 76 77.date{ 78 margin-bottom: 20px; 79 margin-top: 2px; 80} 81 82.sub{ 83 width:250px; 84} 85 86.text{ 87 margin-top: 20px; 88} 89 90.title{ 91 92} 93
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。