html - 使div不受其他div大小的影响

Question

我正在创建一些可编辑的卡片，如下所示。当我点击第一张卡片上的编辑图标时，阴影会显示出来，它使我的 div 更高。

我的问题是，当阴影效果显示其下的其他 div 时，我能否做到这一点，而不是那样移动/改变位置。此外，这段代码应该放在一个片段中。当阴影显示时，它使预览窗口(主体)变高，并且它下面的东西向下移动。我想让窗口在阴影出现前后保持相同的高度。

感谢任何帮助。

$(".card").click(function() {
  if ($(this).val() == 0) {
    $(this).addClass("clicked");
    $(this).val(1);
  }
  else {
    $(this).removeClass("clicked");
    $(this).val(0);
  }
});

$(".action").click(function() {
  var thisCard = $(this).parent().parent();
  thisCard.addClass("edit");
  thisCard.css({"width": "238px"});
  thisCard.find(".title").css({"display": "none"});
  thisCard.find(".action").css({"display": "none"});
  thisCard.find(".action-edit").css({"display": "table-cell"});
  thisCard.find(".input-group").css({"display": "table-cell"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  }
  else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

$(".check").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.css({"width": "240px"});
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".title").text(thisCard.find(".input-main").val());
  }
  else {
    thisCard.find(".title-main").text(thisCard.find(".input-main").val());
    thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
  }
  thisCard.removeClass("clicked");
});

$(".cancel").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.css({"width": "240px"});
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  thisCard.removeClass("clicked");
});

.card {
  display: table;
  width: 240px;
  height: 70px;
  border: transparent;
  border-radius: 3px;
  background-color: #FAFAFA;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  font-size: 16px;
  cursor: pointer;
  margin: 32px auto;
}

.card .content {
  display: table-row;
  width: 100%;
}

.card .content .title,
.card .content .input {
  display: table-cell;
  padding: 24px;
  width: calc(100% - 36px);
  font-size: 16px;
  color: #333;
}

.card .content .input {
  display: none;
}

input {
  border: none;
  font-size: 13px;
  border-bottom: solid 1px #c4c4c4;
  width: 100%;
}

input:focus {
  outline-style:none;
  box-shadow:none;
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action {
  display: table-cell;
  width: 36px;
  padding: 24px 16px;
  text-align: right;
}

.card .content .action-edit {
  display: none;
  width: 36px;
  padding: 0;
  border-left: solid 1px #c4c4c4;
  vertical-align: top; 
}

.check,
.cancel {
  height: 34.5px;
  text-align: center;
}

.action-edit > .check i,
.action-edit >.cancel i {
  line-height: 35px;
  font-size: 13px;
}

.cancel i {
  color: #333;
}

.check i {
  color: #00c983; 
}

.check-tall,
.cancel-tall {
  height: 45.5px;
}

.check-tall i,
.cancel-tall i {
  line-height: 46px !important;
}

.cancel {
  border-bottom: solid 1px #c4c4c4; 
}

.card .content .action i {
  font-size: 14px; 
  color: #333;
}

.card .content .action i:hover {
  color: #00c983; 
}

.clicked {
  background-color: #CAF1FF;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}

.edit {
  background-color: #fff;
  border: solid 1px #00c983;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.subtitle {
  font-size: 12px; 
}

.subtitle-label {
  color: #999; 
}

.input-sub {
  font-size: 12px;
}

.input-sub-line {
  display: table-row; 
  width: 100%;
}

.input-sub-label {
  display: table-cell; 
  width: 25%;
  font-size: 12px;
  color: #999;
}

.input-sub {
  display: table-cell; 
  width: 100%;
}

.input-group {
  display: none; 
  padding: 22px 24px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<div class="card" value=0>
  <div class="content">
    <div class="title">Education</div>
    <div class="input-group"><input type="text" class="input-main"></div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel"><i class="fas fa-times"></i></div>
      <div class="check"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">1-Attribute Card</div>

<div class="card" value=0>
  <div class="content">
    <div class="title"><span class="title-main">Education</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">030</span></span></div>
    <div class="input-group">
      <input type="text" class="input-main">
      <div class="input-sub-line">
        <div class="input-sub-label">Code</div> 
        <input class="input-sub" type="text"></div>
    </div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
      <div class="check check-tall"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">2-Attributes Card</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

我不能 100% 确定我是否正确理解了您的问题，但我看到的唯一移动是由应用于 .card 的边框引起的。如果您在编辑 .card 之前将初始边框添加到它，则该元素的大小不会增加，也不会移动。我将边框设为透明，因此它不会被看到。

$(".card").click(function() {
  if ($(this).val() == 0) {
    $(this).addClass("clicked");
    $(this).val(1);
  }
  else {
    $(this).removeClass("clicked");
    $(this).val(0);
  }
});

$(".action").click(function() {
  var thisCard = $(this).parent().parent();
  thisCard.addClass("edit");
  thisCard.css({"width": "238px"});
  thisCard.find(".title").css({"display": "none"});
  thisCard.find(".action").css({"display": "none"});
  thisCard.find(".action-edit").css({"display": "table-cell"});
  thisCard.find(".input-group").css({"display": "table-cell"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  }
  else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

$(".check").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.css({"width": "240px"});
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".title").text(thisCard.find(".input-main").val());
  }
  else {
    thisCard.find(".title-main").text(thisCard.find(".input-main").val());
    thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
  }
  thisCard.removeClass("clicked");
});

$(".cancel").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.css({"width": "240px"});
  thisCard.find(".title").css({"display": "table-cell"});
  thisCard.find(".action").css({"display": "table-cell"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  thisCard.removeClass("clicked");
});

.card {
  display: table;
  width: 240px;
  height: 70px;
  border: transparent;
  border-radius: 3px;
  background-color: #FAFAFA;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  font-size: 16px;
  cursor: pointer;
  margin: 32px auto;
  border: solid 1px transparent;
}

.card .content {    
display: flex;
    width: 100%;
    max-height: 86px;
}

.card .content .title,
.card .content .input {
  display: table-cell;
  padding: 24px;
  width: calc(100% - 36px);
  font-size: 16px;
  color: #333;
}

.card .content .input {
  display: none;
}

input {
  border: none;
  font-size: 13px;
  border-bottom: solid 1px #c4c4c4;
  width: 100%;
}

input:focus {
  outline-style:none;
  box-shadow:none;
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action {
  display: table-cell;
  width: 36px;
  padding: 24px 16px;
  text-align: right;
}

.card .content .action-edit {
  display: none;
  width: 36px;
  padding: 0;
  border-left: solid 1px #c4c4c4;
  vertical-align: top; 
}

.check,
.cancel {
  height: 34.5px;
  text-align: center;
}

.action-edit > .check i,
.action-edit >.cancel i {
  line-height: 35px;
  font-size: 13px;
}

.cancel i {
  color: #333;
}

.check i {
  color: #00c983; 
}

.check-tall,
.cancel-tall {
  height: 45.5px;
}

.check-tall i,
.cancel-tall i {
  line-height: 46px !important;
}

.cancel {
  border-bottom: solid 1px #c4c4c4; 
}

.card .content .action i {
  font-size: 14px; 
  color: #333;
}

.card .content .action i:hover {
  color: #00c983; 
}

.clicked {
  background-color: #CAF1FF;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}

.edit {
  background-color: #fff;
  border: solid 1px #00c983;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.subtitle {
  font-size: 12px; 
}

.subtitle-label {
  color: #999; 
}

.input-sub {
  font-size: 12px;
}

.input-sub-line {
  display: table-row; 
  width: 100%;
}

.input-sub-label {
  display: table-cell; 
  width: 25%;
  font-size: 12px;
  color: #999;
}

.input-sub {
  display: table-cell; 
  width: 100%;
}

.input-group {
  display: none; 
  padding: 22px 24px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<div class="card" value=0>
  <div class="content">
    <div class="title">Education</div>
    <div class="input-group"><input type="text" class="input-main"></div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel"><i class="fas fa-times"></i></div>
      <div class="check"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">1-Attribute Card</div>

<div class="card" value=0>
  <div class="content">
    <div class="title"><span class="title-main">Education</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">030</span></span></div>
    <div class="input-group">
      <input type="text" class="input-main">
      <div class="input-sub-line">
        <div class="input-sub-label">Code</div> 
        <input class="input-sub" type="text"></div>
    </div>
    <div class="action"><i class="fas fa-pencil-alt"></i></div>
    <div class="action-edit">
      <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
      <div class="check check-tall"><i class="fas fa-check"></i></div>
    </div>
  </div>
</div>
<div class="caption">2-Attributes Card</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>