css - 如何在两个div和button之间显示

Question

我正在尝试显示两个 div，一个在左边(输入)，一个在右边(右)，它们之间有一个按钮(这是一个 asp.net web 元素)，但即使我尝试 float:left 和 right或剩余边距:%，我做不到。这是我的 css 文件；

.input{
    background-color:rgba(23, 23, 23, 0.71);

    border: 2px solid grey;
    width: 450px;
    height: 550px;   
    float: left;
    margin-left:0px;    
    border-radius: 25px;

    padding: 10px; 


    }
.roundcorner //this class is for button
{
border:2px solid #a1a1a1;
text-align: center; 

font-size:18px;
margin-left:45%;
margin-top:35px;
font-style:oblique;
background:#a1a1a1;
width:70px;
border-radius:25px;
-moz-border-radius:35px; /* Firefox 3.6 and earlier */
}

 .output{
    background-color:rgba(23, 23, 23, 0.71);
    border: 2px solid grey;
    width: 270px;
    height: 550px;   
    margin-left: 65%;
    margin-right:15px;
    border-radius: 25px;
        padding: 10px; 


    }

Answer 1

见下文...

.container{
  width:100%;
  font-family:arial;
  }

.box{
  padding-top:60px;
  width:33%;
  height:100px;
  text-align:center;
  display:inline-block;
  zoom:1;
  *display:inline;
  }

.box.left{
  float:left;
  background-color:#ddd;
  }
.box.right{
  float:right;
  background-color:#ddd;
  }

<div class="container">
  <div class="box left">Left div</div>
  <div class="box">
    <button>I'm a button</button>
  </div>
  <div class="box right">Right div</div>
</div>