Q&A
コードはマークダウンのcode機能を利用してご提示ください。
前提・実現したいこと
Writeというブログページの模写コーディングをしています
参考サイト(http://demo.themegraphy.com/write-ja/)トップページの記事欄を再現しようとしています。（細かいデータベース等の再現はしてないです。レイアウトのみにこだわって再現しています。）
発生している問題
問題としては、
documentsの中のaタグの幅が、documentのcontent内に文章を追加するとずれてしまう現象
です。aタグの幅は固定したまま文章を打ち込むことはできないのでしょうか。
方法があれば教えてください。
模写サイト（Write）
http://demo.themegraphy.com/write-ja/
#言語 HTML CSS
該当のソースコード
#HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>write</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <header> <div class="header-logo"> <a href="#">Write</a> </div></body> </html><div class="container"> <div class="header-logo-text"> <p>書くためのテーマ</p> </div> <div class="header-menu"> <a href="#">ホーム</a> <a href="#">ページ</a> <a href="#">タイポグラフィー</a> <a href="#">お問い合わせ</a> </div> <div class="header-search"> <input type="search" class="serach-field" placeholder="検索"> </div> </div> </header> <div class="top"> <div class="top-wrapper"> <img src="images/top-wrapper.jpg"> </div> <div class="top-text"> <h2> Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。 </h2> </div> </div> <hr> <div class="document-wrapper"> <div class="documents"> <div class="date"> <a href="#">2018年3月5日</a> </div> <div class="document"> <div class="title"> <a href="#">書くためのテーマ</a> </div> <div class="content"> Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。 </div> </div> </div> </div> <div class="documents"> <div class="date"> <a href="#">2018年3月5日</a> </div> <div class="document"> <div class="title"></div> <div class="content"></div> </div> </div> <div class="documents"> <div class="date"> <a href="#">2018年3月5日</a> </div> <div class="document"> <div class="title"></div> <div class="content"></div> </div> </div> </div> <footer></footer>
#css
a{
text-decoration: none;
display: inline-block;
color: black;
}
body{
font-size:18px;
margin: 60px 110px;
font-family: Georgia, '游明朝', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif;
box-sizing: border-box;
}
p,h2{
color: #777777;
}
.header{
margin: 0px 100px;
}
.header-logo a{
font-size:36px;
font-weight: bold;
}
.container{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.header-logo-text{
vertical-align: bottom;
}
.header-logo-text p{
display: inline;
vertical-align: bottom;
}
.container a{
padding: 0px 9px;
font-size: 16.884px;
}
/top/
.top-wrapper{
margin-top: 70px;
}
.top-text h2{
font-weight: normal;
margin-top: 90px;
line-height: 50px;
}
/document-wrapper/
.document-wrapper{
margin-top: 70px;
}
.documents{
display: flex;
margin:30px 0px 10px 0px;
}
.date{
width: 110px;
}
.date a{
color: #777777;
font-size:16.884px;
}
.document{
margin-left:200px;
}
.title a{
font-size:22.4px;
font-weight:bold;
}
回答1件
0
ベストアンサー
日付リンクの幅が縮むということですよね。
flex はデフォルトでは、アイテムの幅を自動で調整するのか原因です。
flex-shrink: 0;で自動縮小をなしにすればいいでしょう。
css
1.date{ 2 width: 110px; 3 flex-shrink: 0; /*追加*/ 4}
あるいはショートハンドを使うと、
css
1.date{ 2 flex: 0 0 110px; 3}
投稿2020/04/13 11:27
編集2020/04/13 11:29
総合スコア34075
あなたの回答
tips
プレビュー
