Question

我想将div标签分成两部分。但我不太清楚该怎么做。它现在看起来像这样：

我希望div标签中有一个标题，标题颜色。它应该是这样的：

但我怎么能这样分开呢？最好的问候朱莉 HTML：

<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>

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;
}

EDITED：我刚刚尝试定位div标签，现在位于中间位置。但是这个职位的代码非常混乱，不是吗？

Answer 1

试试这个，我想这就是你的意思吧？ https://jsfiddle.net/54d4tbtc/

由于宽度

，它看起来不那么好

.content {
  float: left;
  height: 50px;
  width: 300px;
  padding: 25px;
  border: 2px solid navy;
  margin: 20px;
  background-color: red;
}

Answer 2

我会制作两个div，并将其中一个包裹在另一个中：

<div class="topbar"></div>

<div class="outer">
  <div class="inner">
    <p>words</p>
  </div>
</div>

与这种类型的CSS结合使用时：

.inner{
  width:100%;
  height: 150px;
  background-color: #FFECB3;
  word-wrap: break-word;
  text-align: center;
}

.inner p{
  padding-top: 10px;
}

它应该可以正常工作。不确定你的CSS中.talraekkeheader做了什么，但如果计划用于此.inner div，那么在执行此操作后您可能不需要它。

NB。我将word-wrap样式添加到.inner，以避免您放入div中的文本溢出。我主要为元素中的段落文本添加了填充，因为您不希望文本靠近div的顶部。

拆分为两个并定位div

2 个答案: