Question

我有一个设计我使用Bootstrap进行编码，它有重叠的卡片。我有布局工作（从jQuery的一点帮助）但顶部卡上的文本被推到底卡的一侧。

我对如何获得顶级卡片内容感到难过。（即XXXs）在各自的顶级卡片中正确对齐。

以下是今天的截图。

我希望它看起来像这样：

以下是代码：

<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Overlap</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index:-1;        
}
.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}
.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}
</style>


</head>
<body>


<div>
    <div class="container"> 

        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7 background-card">
                    <div id="card-entity-header" "="">
                        <div class="card-title">Title</div>
                        <div class="card-subtitle1">Sub-Title</div>
                    </div>
                    <div id="page-cards-background">
                        <div>&nbsp;</div>
                    </div>
                </div>  
                <br><br>
                <div id="page-cards">
                    <div class="card">
                        xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                    </div>      
                    <div class="card">
                        xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                        888<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br> 
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>

$("#page-cards").css("padding-top", 60 + parseInt($("#card-entity-header").height()));
$("#page-cards-background").height( parseInt($("#page-cards").height()) + 45);

</script>


</body></html>

Answer 1

我尝试过对HTML进行一些更改。看看这个：https://jsfiddle.net/hLs7sppd/

＆＃13;

body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index: -1;
}

.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}

.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}

＆＃13;

<div>
  <div class="container">

    <div class="row">
      <div class="col-sm-12">
        <div class="col-sm-7 background-card">
          <div id="card-entity-header">
            <div class="card-title">Title</div>
            <div class="card-subtitle1">Sub-Title</div>
          </div>
          <div id="page-cards-background" style="z-index: 1; height: 687px;">
            <div id="page-cards" style="z-index: 999;">
              <div class="card">
                xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>
              </div>
              <div class="card">
                xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br> 888
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>xxx
                <br>
              </div>
            </div>
          </div>
        </div>
        <br>
        <br>

      </div>
    </div>

  </div>
</div>

＆＃13;

Answer 2

好的......我解决了这个问题。

我很确定我沿着这条路走下去但显然没有。我只需要添加一个位置：绝对;到.background-card css类。

我添加了一些标题，文本和一些引导字段等来证明它有点。

以下是该解决方案的屏幕截图：

以下是代码：

<!DOCTYPE html>
<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Overlap</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
  background-color: #81DFE8;
}

.background-card {
  background: #EFEFEF;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
  margin-top: 60px;
  padding: 0 30px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
  z-index:-1;  
  position:absolute;      
}
.card {
  background: #EFEFEF;
  margin: 15px 30px;
  padding: 30px 75px 45px 50px;
  border-radius: 8px;
  box-shadow: 6px 6px 6px #404040;
}

#card-entity-header {
  padding: 30px 0;
}

.card-title {
  font-size: 32px;
}

.card-subtitle1 {
  font-size: 24px;
}
.card-subtitle1 small {
  font-size: 80%;
  font-style: italic;
  white-space: nowrap;
}
</style>


</head>
<body>


<div>
    <div class="container"> 

        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7 background-card">
                    <div id="card-entity-header" "="">
                        <div class="card-title">Title</div>
                        <div class="card-subtitle1">Sub-Title</div>
                    </div>
                    <div id="page-cards-background">
                        <div>&nbsp;</div>
                    </div>
                </div>  
                <br><br>
                <div id="page-cards">
                    <div class="card row">
                            <h3>Card Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper ullamcorper hendrerit. Cras ut ligula eu lorem finibus porta. Nunc lacinia, ex eu varius condimentum, ipsum enim aliquam magna, quis fringilla quam nunc nec erat.</p>
                            <div class="form-group">
                                <label class="col-sm-12">Label</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12 required">Label </label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl2">
                                </div>
                            </div>
                    </div>      
                    <div class="card row">                              
                            <div class="form-group">
                                <label class="col-sm-12">Label</label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl1">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-12 required">Label </label>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="lbl2">
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<script>

$("#page-cards").css("padding-top", 60 + parseInt($("#card-entity-header").height()));
$("#page-cards-background").height( parseInt($("#page-cards").height()) + 45);

</script>


</body></html>

引导程序中的故意重叠卡 - 文本被推到一边

2 个答案: