Inhalt wird aus dem Container entfernt, wenn Polster hinzugefügt wurden

Question

Ich habe ein Problem mit Inhalten, die außerhalb eines Containers liegen. Dies geschieht im Bereich service_description meines Codes. Ich habe die Polsterung vertikal und horizontal für die Beschreibung eingestellt. Die vertikale Polsterung erfolgt nur nicht horizontal.

Um die Beschreibung herauszubringen, klicken Sie einfach in eines der Felder und Sie werden sehen, worauf ich mich beziehe. Ich möchte, dass der gesamte Inhalt in dieser Box bleibt.

Warum macht das so, wenn ich Polster eingestellt habe?

$('.service_wrapper').click(function() {
  var thisDescription = $('.service_description', $(this));
  $('.service_description').not(thisDescription).hide().parent().removeClass('closed');
  thisDescription.slideToggle(500).parent().toggleClass('closed');
});

.page_wrap {
  margin: 15px 10%
}
.left_service_wrap {
  float: left;
  width: 40%;
  margin-left: 5%;
}
.service_wrapper {
  margin-left: 25%;
  border: 1px solid black;
  margin: 15px 0;
  width: 80%;
}
.service_list {
  margin-left: 20%;
}
.service_title {
  padding: 15px 12px;
  margin: 0;
  font-weight: bold;
  font-size: 1em;
}
.service_title:before {
  content: '';
  background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
  width: 10px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  padding-right: 6px;
}
.closed .service_title:before {
  background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
  background-color: gray;
  color: blue;
  cursor: pointer;
}
.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page_wrap">
  <div class="left_service_wrap">
    <div class="service_list">
      <div class="service_wrapper">
        <div class="service_title">Flooring</div>
        <div class="service_description">The best floors! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        </div>
      </div>
      <div class="service_wrapper">
        <div class="service_title">Roofing</div>
        <div class="service_description">Your roof will be perfect! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        </div>
      </div>
    </div>

html css

1

Becky 30 Dez. 2015 im 18:42

Answer 1

Sie können Ihrer .service_description -Klasse word-wrap hinzufügen, wodurch die Wörter in eine neue Zeile aufgeteilt werden sollen, wenn sie das Ende des Containers erreichen.

.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%; /* Probably should remove this as well */
  margin-top: 10px;
  font-size: .9em;
  word-wrap: break-word;
}

5

sbeliv01 30 Dez. 2015 im 15:57

Answer 2

Die "Wörter" sind zu lang, d. h. länger als eine vollständige Zeile. Im wirklichen Leben werden Sie jedoch niemals so lange Wörter haben ...

EDIT / Ergänzung:

Und hier:

.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

Die Breite von 100% ergibt eine Polsterung von 2 x 14 Pixel (d. h. die tatsächliche Breite beträgt 100% plus 28 Pixel). Fügen Sie dieser Regel box-sizing: border-box; hinzu, um die Auffüllung in die Breite aufzunehmen.

1

Johannes 30 Dez. 2015 im 15:53

Answer 3

Verwenden:

.service_wrapper { overflow:hidden; }

Ich hoffe das hilft.

0

Faraz Sh. 30 Dez. 2015 im 15:48

Answer 4

Fügen Sie word-wrap und box-sizing zu Ihrem .service_decription hinzu:

.service_description {
        box-sizing: border-box;
        word-wrap: break-word;
        display: none;
        font-size: 0.9em;
        margin-top: 10px;
        padding: 8px 14px;
        width: 100%;
      }

 $('.service_wrapper').click(function() {
      var thisDescription = $('.service_description', $(this));
      $('.service_description').not(thisDescription).hide().parent().removeClass('closed');
      thisDescription.slideToggle(500).parent().toggleClass('closed');
    });

    .page_wrap {
      margin: 15px 10%
    }
    .left_service_wrap {
      float: left;
      width: 40%;
      margin-left: 5%;
    }
    .service_wrapper {
      margin-left: 25%;
      border: 1px solid black;
      margin: 15px 0;
      width: 80%;
    }
    .service_list {
      margin-left: 20%;
    }
    .service_title {
      padding: 15px 12px;
      margin: 0;
      font-weight: bold;
      font-size: 1em;
    }
    .service_title:before {
      content: '';
      background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
      width: 10px;
      height: 10px;
      display: inline-block;
      vertical-align: middle;
      padding-right: 6px;
    }
    .closed .service_title:before {
      background-image: url('http://i.stack.imgur.com/ma4L4.png');
    }
    .service_title:hover {
      background-color: gray;
      color: blue;
      cursor: pointer;
    }
    .service_description {
        box-sizing: border-box;
        word-wrap: break-word;
        display: none;
        font-size: 0.9em;
        margin-top: 10px;
        padding: 8px 14px;
        width: 100%;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page_wrap">
      <div class="left_service_wrap">
        <div class="service_list">
          <div class="service_wrapper">
            <div class="service_title">Flooring</div>
            <div class="service_description">The best floors! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
              ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
            </div>
          </div>
          <div class="service_wrapper">
            <div class="service_title">Roofing</div>
            <div class="service_description">Your roof will be perfect! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
              ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
            </div>
          </div>
        </div>

0

Thomas Orlita 30 Dez. 2015 im 18:35

Inhalt wird aus dem Container entfernt, wenn Polster hinzugefügt wurden

4 Antworten

Verwandte Fragen

Neue Fragen

html