Question

我的叠加层目前看起来像这样，我正在寻找它根据尺寸自动调整（因为这是响应）... enter image description here

请注意......我正在使用Bootstrap。 http://getbootstrap.com/

这是第一组html ...

    <div class="Discussion box">
      <div class="topic">
        <img class="PhotoThumbnail TopicPhoto" src="{{user.profile.avatarURL}}" />
        <div class="Name">{{user.profile.firstName}} {{user.profile.lastName}} - {{title}}    </div>
        <p class="TopicText">{{body}}</p>
      </div>

      <div class="show-hide-comments">
        Show Comments (or Hide Comments if showing)
      </div>
      {{> postComments}}
    </div>

以下是评论和代码的代码。帖子...

<template name="postComments">
     <div class="CommentOverlay">
    {{#each comments}}
    {{> showComment}}
    {{/each}}

    {{> newPostComment}}
    </div>
  </template>

  <template name="showComment">
    {{#if editing}}
    {{> editPostComment}}
    {{else}}
    <div class="TopicComments">
      <img class="PhotoThumbnail" src="{{user.profile.avatarURL}}" />
      <div class="Name">{{user.profile.firstName}} {{user.profile.lastName}}</div>
      <p class="CommentText">{{> editPencil}} {{body}}</p>
    </div>
    {{/if}}
  </template>

  <template name="newPostComment">
    <div class="TopicComments">
      <img class="PhotoThumbnail" src="{{currentUser.profile.avatarURL}}" />
      <textarea class="TopicAddCommentText" rows="2" name="comment" placeholder="Write a comment..."></textarea>
      <button data-action="post-comment" class="TopicAddCommentSubmit btn"><p class="SubmitButtonText">Submit</p></button>
    </div>
  </template>

  <template name="editPostComment">
    <div class="TopicComments">
      <img class="PhotoThumbnail" src="{{currentUser.profile.avatarURL}}" />
      <textarea class="TopicAddCommentText" rows="2" name="comment" placeholder="Write a comment..." autofocus>{{body}}</textarea>
      <button data-action="save-comment" class="TopicAddCommentSubmit btn"><p class="SubmitButtonText">Submit</p></button>
    </div>
  </template>

这是css ......

/* Shared */
.PhotoThumbnail {
    border-style: solid;
    border-width: 1px;
    border-color: #DEE2EC;
    border-radius: 100px;
    height: 45px;
    width: 45px;
    margin-left: -80px;
}

.bottom-border {
    border: 1px;
    border-style: solid;
    border-color: #EEEEEE;
    margin: 0px -39px 0px -117px;
}

.TopicPhoto {
    margin-top: 30px;
}

.Name {
    font-weight: bold;
    margin-top: -50px;
    margin-left: -25px;
}

.CommentText{
    margin-left: -25px;
}

.EditComment {
    float: right;
    width: 10px;
    height: 10px;
}

.TopicText {
    min-height: 40px;
    margin-bottom: 5%;
    margin-left: -25px;
}

.TopicComments {
    min-height: 45px;
    padding: 0 0 0 80px;
    margin-left: 20px;
}

.TopicAddCommentText {
    border-color: #DEE2EC;
    border-width: 1px;
    width: 85%;
    height: 50px;
    border-style: solid;
    border-radius: 5px;
    margin-left: 1%;
}

.TopicAddCommentSubmit {
    width: 115px;
    height: 50px;
    background-color: #B679B4;
    border-color: #772A75;
    border-width: 1px;
    border-style: solid;
    float: right;
    box-shadow: 0px 0px 10px #888888;
    margin: 0px -5px 0 0;
}

.SubmitButtonText {
    color: white;
    font-weight: bold;
    margin-top: 9px;
}

.CommentOverlay {
    background-color: #F6F7F8;
    margin-left: -37px;
    padding: 20px;
    margin-right: -38px;
    border-radius: 4px;
    margin-top: 20px;
}



/* Discussions Only */

.Discussion {
    height: 100%;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #DEE2EC;
    border-radius: 10px;
    padding-left: 30px;
    margin-bottom: 30px;
}

.topic {
    margin-bottom: -20px;
    padding: 0 0 0 80px;
}







/* Goals Only */

.Goal {
    height: 100%;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #DEE2EC;
    border-radius: 10px;
    padding-left: 30px;
    margin-bottom: 30px;
}

.GoalBoxes {
    width: 49%;
    margin: 20px 0 0 0;
    min-height: 110px;
    float: left;
}


.GoalTopRightBox {
    float: right;
}

.GoalBottomRightBox {
    float: right;
}

.GoalHeading {
    font-weight: bold;
    margin: 5% -5%;
}

.GoalLine {
    margin-top: 0px;
    margin-bottom: 5px;
}

.GoalInput {
    font-weight: normal;
}

.goalposterline {
    margin-top: 30px;
}

.show-hide-comments {
/*  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;*/
  text-align: center;
  margin-bottom: -20px;
  color: gray;
}

Answer 1

很难说没有你的代码演示我可以看看，但看起来问题的根源是父元素<div class="Discussion box">已经应用了一些padding-left。

.Discussion {
    height: 100%;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: #DEE2EC;
    border-radius: 10px;
    /* padding-left: 30px; Remove this */
    margin-bottom: 30px;
}

您应该删除此内容并将任何填充应用于<div class="topic">。然后，您需要将以下样式应用于<div class="CommentOverlay">

.CommentOverlay {
    width: 100%; /* Add this */
    background-color: #F6F7F8;
    /* margin-left: -37px; Remove this */
    padding: 20px;
    /* margin-right: -38px; Remove this */
    border-radius: 4px;
    margin-top: 20px;
}

我无法获得我的叠加层（用于评论）以填充适当的宽度

1 个答案: