HTML CSS DIV-Panels

Ich möchte so etwas wie dies:
HTML CSS DIV-Panels

Was ich tun so weit:

HTML CSS DIV-Panels

Kann mir jemand sagen, wie ich das erreichen...

Dank! Im Voraus...

Sehen jsFiddle

Code Ist Wie Folgt:

HTML:

<div class="panel panel1">Panel 1x</div>
<div class="panel panel1">Panel 1x</div>
<br>
<div class="panel panel2">Panel 2x</div>

CSS:

body {
    background: #eeeeee;
}
.panel {
    display: inline-block;
    background: #ffffff;
    min-height: 100px;
    height: 100px;
    box-shadow:0px 0px 5px 5px #C9C9C9;
    -webkit-box-shadow:2px 2px 5px 5x #C9C9C9;
    -moz-box-shadow:2px 2px 5px 5px #C9C9C9;
    margin: 10px;
    padding: 10px;
}
.panel1 {
    min-width: 100px;
    width: 100px;
}
.panel2 {
    min-width: 245px;
    width: 245px;
}
  • Divs nicht herum wickeln wie, die. Sie können Inhalt wrap-around schwebte ein Objekt, sondern alle HTML-Elemente sind rechteckig (zumindest für jetzt).
  • Können Sie mir ein Beispiel???
  • Ein Beispiel für was?
  • content-wrap-around-ein Objekt schwebte @Paulie_D
  • jsfiddle.net/4f8p5/2 oder jsfiddle.net/4f8p5/3
  • Danke! Ist das möglich mit bootstrap panel?
  • Wenn Sie möchten, schweben Sie etwas in einem div (das ist, was ein 'Fenster' ist, nehme ich an) kannst du (meistens), aber es ist nicht klar, was Sie zu tun versuchen.
  • Vielen Dank! jsfiddle.net/SanaBukhari/DAFW9/19 @Paulie_D

InformationsquelleAutor user3599534 | 2014-06-23
  1. 0

    Stellen Sie die Höhe des div, um die Rechte kleiner als die linke, und haben kein Rand oben/unten. Dies würde produzieren das Resultat, das Sie suchen

    CSS:

    body {
  background: #eeeeee;
}
.panel {
  display: inline-block;
  background: #ffffff;
  min-height: 100px;
  height: 100px;
  padding: 10px;
}
.panel1 {
  min-width: 100px;
  width: 100px;
}
.small {
  margin-left: 10px;
  width: 111px;
  height: 90px;
  min-height: 90px;
}
.panel2 {
  min-width: 245px;
  width: 245px;
}

    HTML:

    <div class="panel panel1">Panel 1x</div>
<div class="panel panel1 small">Panel 1x</div>
<br>
<div class="panel panel2">Panel 2x</div>

    • Sorry, Aber ich kann es nicht verstehen. Können Sie ein Beispiel geben?
    • jsfiddle.net/DAFW9/23
    • Toll, Aber Zu Spät!!!
    InformationsquelleAutor Slugge
  2. 1

    Finden Sie unter: jsFiddle

    Hoffen, dass Sie dieses problem beheben:

    CSS:

    body {
  background: #eeeeee;
}
.panel {
  display: inline-block;
  background: #ffffff;
  min-height: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
}
.panel1 {
  min-width: 100px;
  width: 100px;
  height: 120px;
  margin-bottom: 0;
  box-shadow: 0;
}
.panel2 {
  min-width: 100px;
  width: 100px;
}
.panel3 {
  min-width: 245px;
  width: 245px;
  margin-top: 0px;
}

    HTML:

    <div class="panel panel1">Panel 1x</div>
<div class="panel panel2">Panel 1x</div>
<br>
<div class="panel panel3">Panel 2x</div>

    • Das's Blick auf einige ziemlich. Aber das problem ist Jetzt Schatten!!! ???
    • Ja, nur kamen um zu sagen, dass. Das problem ist Schatten überlappen sich jeweils element hinter. Versuchen Sie auf dem gleichen z-index Ebene lösen nicht das problem, da der browser einfach die Behandlung der neueste element als auf der Oberseite, auch wenn Sie auf der gleichen Ebene. Können Sie lösen, indem man ein weißes Rechteck mit :vor. Hier ist ein update zu seiner Lösung. jsfiddle.net/DAFW9/21
    • Oops!!! jsfiddle.net/SanaBukhari/DAFW9/22
    • Gute Antwort von @Ege
    • Danke @Ege ich nicht sehen, Ihren Kommentar vor der Veröffentlichung kommentieren
    • Sana Folgen Sie Bitte diesem link jsfiddle.net/DAFW9/21
    • Dank Faisal Awan und @Ege. Ursprünglich wurde für Bootstrap. Aber ich werde es selbst tun. Nochmals Vielen Dank.
    • Willkommen @SanaBukhari
    • es gibt keinen Raum für den text in Ihrem panels

    InformationsquelleAutor Faisal Awan
Schreibe einen Kommentar