CSS将多个div彼此相邻并且彼此重叠

时间：2014-02-03 10:31:52

标签： css html css-float relative

我正在尝试整理一个页面，其中一些按钮以网格状排列，一列三个在右边，另一个在左边，但是我不能得到它们可以正常漂浮。

我正试图让绿色和橙色按钮直接位于左侧黑色按钮下方 我现在已经到了这一点，我根本无法找到问题的原因，任何帮助都将不胜感激！

这是jsfiddle

这是CSS：

* {
    margin:0;
    padding:0;
}


body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica,         Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;   
}


/*Grey box centered*/
.box {

    width: 50%;
    height: 30%;
    background-color: #e0e0e0;
    padding:2%;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius:12px;
    margin: auto;
}




/*Column 1*/
/*Button 1*/

.button1 {
    display:table;
    float:left;
    width:20%;
    height:5%;
    padding:2%;
    background-color:#434343;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    border-bottom:solid black 3px;       
}

.button1 p {
    font-size:100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:white;
}


.button1:hover {
    border-bottom:solid black 2px;
    margin-top:1px;
}

.button1:active {
    position:relative;
    background-color:#292929;
    border-bottom:solid #434343 2px;
    top:2px;  
}

/*Button 2*/

.button2 {
    display:table;
    float:left;
    margin-top:5%;
    width:20%;
    height:5%;
    padding:2%;
    background-color:#a5de37;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    border-bottom:solid #8dbb28 3px; 
}

.button2 p {
    font-size:100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:white;
}


.button2:hover {
     position:relative;
    border-bottom:solid #8dbb28 3px;
    top: 1px;
}

.button2:active {
    position:relative;
    top:2px;
    background-color:#8dbb28;
    border-bottom:solid #a5de37 3px;
    color:white;
}


/*Button 3*/



.button3 {
    display:table;
    float:left;
    margin-top:5%;
    width:20%;
    height:5%;
    padding:2%;
    background-color:#fd6631;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    border-bottom:solid #d34e24 3px;
}

.button3 p {
     font-size:100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:white;   
}

.button3 p:active {
    color:white;
}


.button3:hover {
    position:relative;
    border-bottom:solid #d34e24 2px;
    top: 1px;
}

.button3:active {
    position:relative;
    top:2px;
    background-color:#d34e24;
    border-bottom:solid #fd6631 2px; 
}




/*column2*/

/*Button 4*/

.button4 {
    display:table;
    float:right;
    width:20%;
    height:5%;
    padding:2%;
    background-color:#434343;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    border-bottom:solid black 3px;       
}

.button4 p {
    font-size:100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:white;
}


.button4:hover {
    border-bottom:solid black 2px;
    margin-top:1px;
}

.button4:active {
    position:relative;
    background-color:#292929;
    border-bottom:solid #434343 2px;
    top:2px;  
}

3 个答案:

答案 0 :(得分：1)

这是你想要的：

更改button4位置。添加清晰的页面。

<div class=box>

  <div class="button1">

      <p>  
        Press me      
      </p>

    </div>



     <div class="button4">

      <p>  
        Press me      
      </p>


    </div>


    <div class="clearpage" style="clear:both;"></div>

    <div class="button2">

      <p>  
        Press me      
      </p>

    </div>




     <div class="button3">

      <p>  
        Press me      
      </p>

         </div>



</div>

和css：

* {
    margin:0;
    padding:0;
}


body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;   
}


/*Grey box centered*/
.box {

    width: 50%;
    height: 30%;
    background-color: #e0e0e0;
    padding:2%;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius:12px;
    margin: auto;
}




/*Column 1*/
/*Button 1*/

.button1 {
    display:table;
    float:left;
    width:20%;
    height:5%;
    padding:2%;
    background-color:#434343;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    border-bottom:solid black 3px;       
}

 .button1 p {
    font-size:100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:white;
}


.button1:hover {
    border-bottom:solid black 2px;
    margin-top:1px;
}

.button1:active {
    position:relative;
    background-color:#292929;
    border-bottom:solid #434343 2px;
    top:2px;  
}

/*Button 2*/

.button2 {
    display:table;
    left:0;
    margin-top:5%;
    width:20%;
    height:5%;
    padding:2%;
    background-color:#a5de37;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    border-bottom:solid #8dbb28 3px; 
}

 .button2 p {
    font-size:100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:white;
}


.button2:hover {
    position:relative;
    border-bottom:solid #8dbb28 3px;
    top: 1px;
}

.button2:active {
    position:relative;
    top:2px;
    background-color:#8dbb28;
    border-bottom:solid #a5de37 3px;
    color:white;
}


/*Button 3*/



.button3 {
    display:table;
    float:left;
    margin-top:5%;
    width:20%;
    height:5%;
    padding:2%;
    background-color:#fd6631;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    border-bottom:solid #d34e24 3px;
}

 .button3 p {
    font-size:100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:white;   
}

.button3 p:active {
    color:white;
}


.button3:hover {
    position:relative;
    border-bottom:solid #d34e24 2px;
    top: 1px;
}

.button3:active {
    position:relative;
    top:2px;
    background-color:#d34e24;
    border-bottom:solid #fd6631 2px;

}




/*column2*/

/*Button 4*/

.button4 {
    display:table;
    float:right;
    width:20%;
    height:5%;
    padding:2%;
    background-color:#434343;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    border-bottom:solid black 3px;       
}

 .button4 p {
    font-size:100%;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:white;
}


.button4:hover {
    border-bottom:solid black 2px;
    margin-top:1px;
}

.button4:active {
    position:relative;
    background-color:#292929;
    border-bottom:solid #434343 2px;
    top:2px;  
}

Fiddle Code

答案 1 :(得分：0)

你想要这样的东西。Fiddle demo

如果是，则阅读clear css属性

答案 2 :(得分：0)

我会创建一行，并在该行内有两列，然后我会在列中添加按钮。这是一个小提琴。 http://jsfiddle.net/abitdodgy/56y2L/ 

.row {
  background-color: #eee;
  margin: 0 auto;
  padding: 10px;
  width: 620px;
}

.col {
  display: inline-block;
  text-align: center;
  width: 300px;
}

HTML 

<div class="row">
    <div class="col">
        <button>Black</button>
        <button>Green</button>
        <button>Orange</button>
    </div>
    <div class="col">
        <button>Black</button>
        <button>Green</button>
        <button>Orange</button>
    </div>
</div>
相关问题
最新问题