Question

我搜索了无数线程同样的问题，但它们似乎不适合我的情况。我正在尝试完成我的网站的一个部分，其中有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>

非常感谢您对此问题的任何回复

Answer 1

尝试使用此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：）

Fiddle.

Answer 2

您遇到的问题非常普遍，实际上有一种简单的方法可以解决它。

在this example中，我为每个列添加了一个类，以便我可以立即设置它们的常用CSS。

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

例如，通常会显示span代码inline，这意味着连续的span代码会保留在同一行中。

另一方面，div标签默认显示为block，这意味着每个标记都会换一个新行。

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

在示例小提琴中，我使用了display:inline-block;，它与display:inline;

非常相似但略有不同

Here是属性display

的详细说明

希望这有帮助

水平对齐两个DIV的问题

2 个答案: