我想将我的 div 标签一分为二。但我不太清楚该怎么做。现在看起来像这样:
而且我希望 div 标记中有一个带有标题颜色的标题。它应该看起来像这样:
但我怎么能这样分手呢？ 最好的问候朱莉
HTML 和 CSS:
#container {
width: 100%;
}
body {
background-color:rgb(48,48,48);
}
.topbar {
width: 100%;
height: 50px;
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.latestnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.hotnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.coldnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.numberheader {
height 100px;
background-color: red;
position: absolute;
top: 80px;
left: 30px;
right: 0;
width: 100px;
height: 50px;
}
.content {
float: left;
height:50px;
width:700px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
} <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div id="container">
<div class="topbar">
<p>Topbar</p>
</div>
<div class="latestnumbers" id="show">
<div class="numberheader">
<p>Tal</p>
</div>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="select.php" method="post">
<input type="number" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<div class="hotnumbers">
<p>test</p>
</div>
<div class="coldnumbers">
<p>test</p>
</div>
</div>
</body>
</html>编辑: 我刚刚尝试定位 div 标签，现在它位于中间。但是这个职位的代码很乱，不是吗？
最佳答案
试试这个，我想这就是你的意思吧？ https://jsfiddle.net/54d4tbtc/
由于宽度的原因，它看起来不太好
.content {
float: left;
height: 50px;
width: 300px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
关于html - 一分为二并定位一个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34187949/