兄弟姐妹的div位置受兄弟身高影响

时间:2017-10-19 04:31:03

标签: html css position

红线是divs容器,边距为10px 我希望每当在第一个div添加新内容时第二个div保持在蓝线,当第一个div添加新内容时,当然高度会扩展,这会影响第二个div下降,我不想要.. 这两个div都有以下样式

background-color: #FF694F;
max-width: 400px;
border-radius: 15px;
position: relative;
display: inline-block;
margin: 10px;

我该怎么办?我尝试了我所知道的一切...... Here's screenshot



.set {
  background-color: #FF694F;
  max-width: 400px;
  border-radius: 15px;
  /* height: 100%; */
  position: relative;
  /* max-height: 500px; */
  display: inline-block;
  margin: 10px;
}

#reminder-section-set {
  margin: 10px;
}

.set-title {
  text-align: center;
  padding: 10px;
}

h1 {
  font-style: italic;
  font-weight: 500;
  max-width: 500px;
}

.create-reminder-control {
  margin: 15px;
}

.add-new-reminder {
  background-color: transparent;
  border: 0px;
  font-size: 17px;
}

.add-new-reminder,
.reminder-lists {
  padding: 10px;
}

input {
  color: black;
  border: 0;
  padding: 10px;
}

.reminder-lists {
  position: relative;
}

.a-reminder {
  padding: 5px;
}

.save-control {
  bottom: 0;
  width: 100%;
  text-align: center;
}

.save-reminder-button {
  background-color: #FF533D;
  max-width: 200px;
  width: 100px;
  padding: 10px;
  text-align: center;
  margin: 10px;
  border: 0;
  outline: none;
  box-shadow: 0px 2px 1px 0px #b75050;
}

<section id="reminder-section-set">


  <div class="set">
    <div class="set-title">
      <h1 contenteditable="true">Name this reminder</h1>
    </div>
    <div class="create-reminder-control"><button class="add-new-reminder">+ add new</button><input class="create-reminder-value" type="text" placeholder="get something done"></div>
    <div class="reminder-lists">
      <div class="a-reminder">a</div>
      <div class="a-reminder">a</div>
    </div>
    <div class="save-control"><button class="save-reminder-button">Save</button></div>
  </div>
  <div class="set">
    <div class="set-title">
      <h1 contenteditable="true">Name this reminder</h1>
    </div>
    <div class="create-reminder-control"><button class="add-new-reminder">+ add new</button><input class="create-reminder-value" type="text" placeholder="get something done"></div>
    <div class="reminder-lists"></div>
    <div class="save-control"><button class="save-reminder-button">Save</button></div>
  </div>
</section>
&#13;
&#13;
&#13;

0 个答案:

没有答案