发表评论后，我的2个div将互相放置

时间：2019-07-04 09:18:40

标签： html css

我要在一页纸上制作2个表格，我希望它们彼此相邻，在不放置评论的情况下，它们彼此相邻，但是每当我发表评论时，它们都会被放置在下面< / strong>彼此。

这是我的HTML和CSS代码：

body {
  background-color: #edf0f2;
}

textarea {
  display: inline-block;
  width: 630px;
  height: 120px;
  background-color: #fff;
  border-color: #5bb112;
  margin-top: 10px;
  margin-left: 15px;
  position: relative;
  resize: none;
}

.Changelog {
  margin-left: 15px;
  width: 800px;
}

.comment-box {
  width: 630px;
  padding-top: 5px;
  margin-bottom: 4px;
  background-color: #fff;
  border-radius: 1px;
  position: absolute;
  border: 1px solid #5bb112;
  margin-top: 8px;
  align-content: left;
}

.comment-box p {
  font-family: arial;
  font-size: 14px;
  line-height: 16px;
  color: #282828;
  font-weight: 100;
  margin-bottom: 10px;
  margin-left: 5px;
}

* {
  margin: 0;
  padding: 0;
}


/*-------Changelog---------*/

#maindiv {
  display: flex;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  overflow: hidden;
}

#first {
  width: 50%;
}

#second {
  width: 50%
}

.changelog-box {
  width: 630px;
  padding-top: 5px;
  margin-bottom: 4px;
  background-color: #fff;
  border-radius: 1px;
  position: absolute;
  border: 1px solid #5bb112;
  margin-top: 8px;
  align-content: left;
}

.changelog-box p {
  font-family: arial;
  font-size: 14px;
  line-height: 16px;
  color: #282828;
  font-weight: 100;
  margin-bottom: 10px;
  margin-left: 5px;
}
<!DOCTYPE html>
<html>


<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>


  <div id='maindiv'>
    <div id='first'>

      <form method='POST' action=''>
        <input type='hidden' name='uid' value='1'>
        <input type='hidden' name='date' value='2019-07-04'>
        <textarea name='message'></textarea><br>
        <button type='submit' name='commentSubmit'> Comment </button>
      </form>
    </div>

    <div id='second'>


      <form method='POST' action=''>
        <input type='hidden' name='uid' value='1'>
        <input type='hidden' name='date' value='2019-07-04'>
        <textarea name='message'></textarea><br>
        <button type='submit' name='changelogSubmit'> Comment </button>
      </form>
    </div>
  </div>
</body>

</html>

我希望他们有我的2个表单，且注释部分彼此相邻。

1 个答案:

答案 0 :(得分：0)

您错过了</section>的结束标签。请在下面找到更正的代码

body {
  background-color: #edf0f2;
}

textarea {
  display: inline-block;
  width: 630px;
  height: 120px;
  background-color: #fff;
  border-color: #5bb112;
  margin-top: 10px;
  margin-left: 15px;
  position: relative;
  resize: none;
}

.Changelog {
  margin-left: 15px;
  width: 800px;
}

.logout {
  display: inline-block;
  float: left;
  : ;
  position: absolute;
  margin-top: 27px;
  margin-right: 20px;
  margin-left: 130px;
}

.login {
  display: inline-block;
  float: right;
  position: absolute;
  margin-top: 27px;
  margin-right: 20px;
  margin-left: 130px;
}

button {
  width: 100px;
  height: 30px;
  background-color: #5bb112;
  border: none;
  color: #e2e2e2;
  font-family: arial;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 19px;
  margin-left: 15px;
  margin-top: 3px;
}

.comment-box {
  width: 630px;
  padding-top: 5px;
  margin-bottom: 4px;
  background-color: #fff;
  border-radius: 1px;
  position: absolute;
  border: 1px solid #5bb112;
  margin-top: 8px;
  align-content: left;
}

.comment-box p {
  font-family: arial;
  font-size: 14px;
  line-height: 16px;
  color: #282828;
  font-weight: 100;
  margin-bottom: 10px;
  margin-left: 5px;
}

.edit-form {
  position: absolute;
  top: 3px;
  right: 3px;
}

.edit-form button {
  width: 40px;
  height: 20px;
  color: #282828;
  background-color: #fff;
  opacity: 0.7;
}

.edit-form button:hover {
  opacity: 1;
}

.delete-form {
  position: absolute;
  top: 3px;
  right: 58px;
}

.delete-form button {
  width: 40px;
  height: 20px;
  color: #282828;
  background-color: #fff;
  opacity: 0.7;
}

.delete-form button:hover {
  opacity: 1;
}

* {
  margin: 0;
  padding: 0;
}


/*-------Changelog---------*/

#maindiv {
  display: flex;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  overflow: hidden;
}

#first {
  width: 50%;
}

#second {
  width: 50%
}

.changelog-box {
  width: 630px;
  padding-top: 5px;
  margin-bottom: 4px;
  background-color: #fff;
  border-radius: 1px;
  position: absolute;
  border: 1px solid #5bb112;
  margin-top: 8px;
  align-content: left;
}

.changelog-box p {
  font-family: arial;
  font-size: 14px;
  line-height: 16px;
  color: #282828;
  font-weight: 100;
  margin-bottom: 10px;
  margin-left: 5px;
}
<header>

</header>
<br><br>


<div id='maindiv'>
  <div id='first'>
    <h2>Changelog</h2>
    <br>
    <form method='POST' action=''>
      <input type='hidden' name='uid' value='1'>
      <input type='hidden' name='date' value='2019-07-04'>
      <textarea name='message'></textarea><br>
      <button type='submit' name='commentSubmit'> Comment </button>
    </form>
  </div>

  <div id='second'>

    <section>
      <h2>Changelog</h2>
      <br>


      <form method='POST' action=''>
        <input type='hidden' name='uid' value='1'>
        <input type='hidden' name='date' value='2019-07-04'>
        <textarea name='message'></textarea><br>
        <button type='submit' name='changelogSubmit'> Comment </button>
      </form>
    </section>
  </div>
</div>

相关问题
最新问题