同じ問題で無数のスレッドを検索しましたが、私の場合はうまくいかないようです。上半分に画像、下半分にテキストを含む 3 つの小さなボックスがそれぞれある、私の Web サイトのセクションを完成させようとしています。問題は、右にフロートするときです。水平に配置されるようにするために、右に移動しますが、他のものと一緒に上には移動しません。
これは、div に関連するコードの一部です。
CSS:
#features {
background:yellow;
position: relative;
width: 100%;
padding-bottom: 50px;
padding-top: 50px;
height: 400px;
}
#features .section2 {
margin: 0 auto;
background: blue;
width: 960px;
height: auto;
}
#column_1 {
background: orange;
width: 290px;
}
#column_1 .index-icon {
width: 290px;
}
#column_1 .index-icon img.news_image {
margin-left: 103px;
width: 90px;
height: 90px;
}
#column_1 .text {
padding-top: 30px;
}
#column_1 .text h4 {
text-align: center;
}
#column_1 .text p {
font-size: 14px;
text-align: center;
padding-top: 20px;
color: #659EC7;
}
#column_2 {
width: 290px;
background: pink;
}
#column_2 .index-icon img.news_image {
margin-left: 103px;
width: 90px;
height: 90px;
}
#column_2 .text {
padding-top: 30px;
}
#column_2 .text h4 {
text-align: center;
}
#column_2 .text p {
font-size: 14px;
text-align: center;
padding-top: 20px;
color: #659EC7;
}
HTML:
<section id="features">
<div class="section2">
<div id="column_1">
<div class="index-icon"><img class="news_image" src="images/mail.png"></div>
<div class="text">
<h4> NEWS </h4>
<p> We're not just great Photoshoppers also have experience developing products as entrepreneurs. This allows us to contribute to your project beyond just the design. </p>
</div>
</div>
<div id="column_2">
<div class="index-icon"><img class="news_image" src="images/mail.png"></div>
<div class="text">
<h4> NEWS </h4>
<p> We're not just great Photoshoppers also have experience developing products as entrepreneurs. This allows us to contribute to your project beyond just the design. </p>
</div>
</div>
</div>
</section>
この問題に関するご回答ありがとうございます