Fatal编程技术网
  • html/
  • 我想用html创建两个并排放置的计算器

我想用html创建两个并排放置的计算器

html css

我想用html创建两个并排放置的计算器,html,css,Html,Css,我使用升华创建了两个计算器并排与HTML5，但最终的结果是两个计算器，一个在上面，另一个在底部 这是我的HTML代码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="design2.css" > <title>Calculator Italy</title> </head> <

我使用升华创建了两个计算器并排与HTML5，但最终的结果是两个计算器，一个在上面，另一个在底部

这是我的HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="design2.css" >
    <title>Calculator Italy</title>
  </head>
  <body bgcolor="skyblue">
    <form>
      <div id="italyCalc">
        <input type="text" id="display" disabled><br>

        <input type="button" id="item1" onclick="adding('1')" value="1" >
        <input type="button" id="item1" onclick="adding('2')" value="2" >
        <input type="button" id="item1" onclick="adding('3')" value="3" >
        <input type="button" id="item1" onclick="adding('+')" value="+" ><br>

        <input type="button" id="item2" onclick="adding('4')" value="4" >
        <input type="button" id="item2" onclick="adding('5')" value="5" >
        <input type="button" id="item2" onclick="adding('6')" value="6" >
        <input type="button" id="item2" onclick="deleteLast()" value="<--" ><br>

        <input type="button" id="item1" onclick="adding('7')" value="7" >
        <input type="button" id="item1" onclick="adding('8')" value="8" >
        <input type="button" id="item1" onclick="adding('9')" value="9" >

        <input type="button" id="item1" onclick="adding('.')" value="." ><br>
        <input type="button" id="item2" onclick="adding('0')" value="0" >
        <input type="button" id="item2" onclick="adding('-')" value="-" >
        <input type="button" id="item2" onclick="adding('*')" value="*" >
        <input type="button" id="item2" onclick="adding('/')" value="/" ><br>

        <input type="button" id="itemBig" onclick="adding('C')" value="C" >
        <input type="button" id="item1" onclick="power('2')" value="X^2" >
        <input type="button" id="itemBig" onclick="returnResult()" value="=" >

      </div>
      <div id="italyCalc2">
        <input type="text" id="display" disabled><br>

        <input type="button" id="item1" onclick="adding('1')" value="1" >
        <input type="button" id="item1" onclick="adding('2')" value="2" >
        <input type="button" id="item1" onclick="adding('3')" value="3" >
        <input type="button" id="item1" onclick="adding('+')" value="+" ><br>

        <input type="button" id="item2" onclick="adding('4')" value="4" >
        <input type="button" id="item2" onclick="adding('5')" value="5" >
        <input type="button" id="item2" onclick="adding('6')" value="6" >
        <input type="button" id="item2" onclick="deleteLast()" value="<--" ><br>

        <input type="button" id="item1" onclick="adding('7')" value="7" >
        <input type="button" id="item1" onclick="adding('8')" value="8" >
        <input type="button" id="item1" onclick="adding('9')" value="9" >

        <input type="button" id="item1" onclick="adding('.')" value="." ><br>
        <input type="button" id="item2" onclick="adding('0')" value="0" >
        <input type="button" id="item2" onclick="adding('-')" value="-" >
        <input type="button" id="item2" onclick="adding('*')" value="*" >
        <input type="button" id="item2" onclick="adding('/')" value="/" ><br>

        <input type="button" id="itemBig" onclick="adding('C')" value="C" >
        <input type="button" id="item1" onclick="power('2')" value="X^2" >
        <input type="button" id="itemBig" onclick="returnResult()" value="=" >

      </div>
    </form>
    <script src="logic2.js"></script>
  </body>
</html>


意大利计算器
换句话说，我希望一个计算器放在左边，另一个放在右边，两者与顶部的距离相同

我该怎么做呢？

您只需给出两个div的
float:left像这样：



#italyCalc，#italyCalc2{
浮动：左；
}
























只需给出两个div的
float:left像这样：



#italyCalc，#italyCalc2{
浮动：左；
}
























添加以下代码


form{
display:flex;
  justify-content:space-around;
}




表单{
显示器：flex；
证明内容：周围的空间；
}



意大利计算器





















添加以下代码


form{
display:flex;
  justify-content:space-around;
}




表单{
显示器：flex；
证明内容：周围的空间；
}



意大利计算器





















将两个计算器
div
与id
calculatorContainer一起包装成一个
div


#calculatorContainer{ display: flex;flex-direction:row}


Jsbin：

将两个计算器
div
与id
calculatorContainer一起包装成一个
div


#calculatorContainer{ display: flex;flex-direction:row}


Jsbin：

试试我做的这个JSFIDLE：


我将计算器嵌套在一个带有类的div中，在本例中，我将其称为
flexbox
，并向其添加了以下css：


.flexbox {
   display: -webkit-flex;
   display: flex;
   background-color: lightgrey;
}


基本上就是这样。
试试我做的这个JSFIDLE：


我将计算器嵌套在一个带有类的div中，在本例中，我将其称为
flexbox
，并向其添加了以下css：


.flexbox {
   display: -webkit-flex;
   display: flex;
   background-color: lightgrey;
}



基本上就是这样。
尝试使用CSS3 Flex Box尝试使用CSS3 Flex Box尝试解释您在那里做了什么尝试解释您在那里做了什么