友人から初めてサイトのコーディング依頼を受けて喜んでいたら
凄く悩むところがあったので、友人への恨みとスキルアップの喜びを
込めて記事に残しておきます。
友人から届いたサイトデザインの一部
なんだ普通のボックスやん！簡単、簡単
、、、、
なんか途中で切れてるんですけど
そこから半日格闘！！
正しいやり方かどうかはわかりませんが、以下のような方法でできました。
index.html
<div class="contact-form-box contact-form-centerbox">
<div class="flex contact-form-address">
<p>
500 Terry Francois St.<br />
San Francisco<br />CA 94158
</p>
</div>
</div>
style.css
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.contact-form-box{
max-width: 320px;
width: calc(100%/3);
height: 300px;
}
.contact-form-address{
/* ここで枠線の高さを変えている */
height: 90%;
width: 100%;
box-sizing: border-box;
border-right: 1px solid;
border-left: 1px solid;
}
.contact-form-address{
height: 90%;
width: 100%;
box-sizing: border-box;
border-right: 1px solid;
border-left: 1px solid;
}
結果
（SNSのアイコンが違うのは見なかった事に）
positin:absolute;
top:-10px;
とか色々試したんですがうまくいかず、この方法でなんとかできました。
他に何か良い方法があればご教授いただきたいです。
ここまで読んでいただきありがとうございました。
↧