0

同じ問題で無数のスレッドを検索しましたが、私の場合はうまくいかないようです。上半分に画像、下半分にテキストを含む 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>

この問題に関するご回答ありがとうございます

4

2 に答える 2