2
私はdivの下にこのボタンを表示しようとしていましたが、何がうまくいかなかったのか分かりません。ボタンはページの真下に中央揃えされているはずです。divより下のボタンを取得する方法
ボタンをインラインブロックにして、別のdivにブロックを入れてそのdivを変更するように、CSSを変更してみましたが、実際には何も効果がありません。問題の
画像
* {
background-color: rgba(0, 0, 0, 0.1);
}
.header {
font-family: arial;
text-align: center;
}
.recent_projects {
position: absolute;
width: 100%;
text-align: center;
}
.container {
height: 400px;
width: 250px;
display: inline-block;
padding-left: 75px;
padding-right: 75px;
padding-top: 50px;
text-align: justify;
overflow: hidden;
}
#box1 {
float: left;
}
#box2 {
margin: 0 auto;
}
#box3 {
float: right;
}
.recentProjectImages {
height: 200px;
width: 250px;
}
/*--Button--*/
.button {
border-radius: 4px;
background-color: #0466D4;
border: none;
color: #FFFFFF;
display: block;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: auto;
position: relative;
}<div class="header">
<h1>Recent Projects</h1>
</div>
<section class="recent_projects">
<div id="box1" class="container">
<img class="recentProjectImages" src="placeholder.png" alt="placeholder">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="box2" class="container">
<img class="recentProjectImages" src="placeholder.png" alt="placeholder">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="box3" class="container">
<img class="recentProjectImages" src="placeholder.png" alt="placeholder">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</section>
<button class="button"><span>Details</span></button>
私はあなたが使用することをアドバイスう@kevin：わからないなぜあなたはそれを持っていますが、削除すると、それはあなたの望ましい結果を与えますブートストラップそれははるかに簡単で、応答性の良いお尻を与えるだろう。 –
ありがとう！私はそれを調べます！ – RejectEd27
@ RejectEd27解決策を見つけました。あなたがそれを必要とするかどうかは分かりません。それがあなたが期待しているものかどうかを素早くチェックして教えてもらえますか？ –