Question

我已经创建了两个圆角框，我希望彼此相邻。但是第二个框出现在第一个框的正下方，尽管我使用浮动：左边第一个。任何解决方法都非常有用。下面是html和css。

HTML：

<html>
    <head>
        <title>Homepage</title>
        <link rel="stylesheet" href="layout.css"/>
    </head>

    <body>

        <div id="containerDiv"> 

                    <!-- Box 1 -->

            <div id="box1" class="boxDiv">
                <div class="upperRound"></div>
                <div class="boxTagLine">
                        Some Tag Line
                </div>
                <div class="boxContent">
                    Heres some content
                </div>
                <div class="lowerRound"></div>
            </div>

            <!-- Box 2 -->

            <div id="box2" class="boxDiv">
                <div class="upperRound"></div>
                <div class="boxTagLine">
                        Some Tag Line
                </div>
                <div class="boxContent">
                    Heres some content
                </div>
                <div class="lowerRound"></div>
            </div>

        </div>


    </body>
</html>

CSS：

#containerDiv {
    width: 1000px;

}
.boxDiv {
    width: 248px;
}
.upperRound {
    background-image: url('rounded_upper.gif');
    height: 20px;
}

.lowerRound {
    background-image: url('rounded_lower.gif');
    height: 20px;
}

.boxContent,.boxTagLine {
    border-left: 2px solid #B5B5B5;
    border-right: 2px solid #B5B5B5;
    padding: 10px;
    background-color:#F8F8F8;
    solid #B5B5B5;

}

.boxTagLine {
    color:#0066FF;
}

#box1 {
    float:left;
}

Answer 1

第二个div必须向右浮动，下一个元素应该清除浮动。我会在一秒钟内添加更多信息。

我有点不对劲。你甚至不需要清除div。

查看此question。

所以 - 在你的情况下，将其添加到css =＆gt;

#box2 {
    float:right;
}

#containerDiv {
    width: 1000px;
    overflow: hidden;
}

我没试过，但它应该有用。

采矿方法会在箱子之间留出空间。所以 - 它可能不是理想的效果。

Answer 2

你最好使用跨度

但是如果你必须使用div：

.boxDiv {
    width: 248px;
    display: inline;
}

Answer 3

向左浮动两个方框：

#box1,#box2 {
    float:left;
}

Answer 4

离开你的.boxDiv会更好，就像这样：

.boxDiv {
    width: 248px;
    float: left;
}

这样，如果你添加更多的盒子，它们会立即浮动，否则你就会添加特定的类名：

#box1, #box2, #box3, #box4 {
    float:left;
}

将圆角框彼此相邻对齐

4 个答案: