Question

我试图以这样的方式对齐3个<div>元素，使得两个元素彼此相邻，第三个元素在它们之下，从一个延伸到另一个。 Here是我的小提琴，你可以看到。这也是我的css：

<style type="text/css">
body {
    background-image: url(https://www.dropbox.com/s/ri903jtb93a5168/background.jpg);
    background-attachment:fixed;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background-repeat:no-repeat;
    background-position:center;
    padding-right: 20%;
    padding-left: 20%;
    padding-top: 19%;
}
#left {
    float: left;
    width: 25%;
    text-align: center;
}
#right {
    float: right;
    width: 25%;
    text-align: center;
}

#bottom {
    position:relative
}

.lists {
    background: transparent;
    width: 268px;
    padding: 5px;
    font-size: 16px;
    border: none;
    height: 34px;
    -webkit-appearance: none;
}
</style>

有什么想法吗？我是新手，试图抓住css。

谢谢！

Answer 1

我有点改变了你的代码，我添加了clear：float，在左右div之后。

请查看Demo，请告诉我这是否是您想要的

Answer 2

请进行更正

#right {
    /*  omit float: right  
    float: right; */
    width: 25%;
    text-align: center;
}

#bottom {
   /* omit position: relative  
   position:relative */
}

用上面的代码替换你的代码并告诉我。

Answer 3

将样式clear: both;添加到ID为“底部”的div

尝试对齐DIV元素失败

3 个答案: