0

我已经搜索了无数具有相同问题的线程，但它们似乎不适用于我的情况。我正在尝试完成我网站的一部分，其中有 3 个小框，每个小框在上半部分包含一个图像，然后在底部包含文本。问题是当我将一个浮动到右侧时，为了确保它最终水平定位，它会向右移动，尽管它不会与另一个一起移动。

这是我的代码的一部分，它与 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

0

您面临的问题很常见，实际上有一种简单的方法可以解决它。

在此示例中，我为您的每个列添加了一个类，因此我可以一次设置它们的公共 CSS。

诀窍是使用 CSS 属性display来更改特定组件在页面流中的显示方式。

例如span，通常会显示一个标签，inline这意味着连续span的标签将保持在同一行。

另一方面，div标签block默认显示，这意味着它们每个都换行。

如果您希望一个或多个 div 显示在同一行中，只需添加display:inline;到其 CSS。

在我使用的示例小提琴display:inline-block;中，它略有不同但几乎相同display:inline;

这里是属性的详细解释display

希望这可以帮助

于 2013-07-05T22:16:33.273 回答
0

尝试使用这个 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;
    float: left;
}
#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;
    float: right;
}
#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;
}

刚刚添加float: left;到#column1和:)float: right;#column2

小提琴。

于 2013-07-05T22:07:25.780 回答