flexible square-box nebeneinander

tutto · 03.10.2015

Ich möchte die boxen nebeneinander haben. Den Code des Workarounds verstehe ich nicht wirklich:

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>squareboxes</title>
<style>
.square-box{
   position: relative;
   width: 30%;
   overflow: hidden;
}
.square-box:before{
   content: "";
   display: block;
   padding-top: 100%;
}
.square-content{
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   color: white;
   background: #4679BD;
   padding: 0.5em;
}
.square-content2{
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   color: #03C;
   background-color: #3F3;
   padding: 0.5em; 
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
}
</style>
</head>

<body>
   <div class="square-box">
     <div class="square-content">
     die erste
  </div>
  </div>
   </div>
  <div class="square-box">
     <div class="square-content2">
     die zweite
  </div>
  </div>
   </div>
</body>
</html>

dn3d_fanboy · 03.10.2015

Zunächst einmal sind da nach jeder Box ein schießendes </div> zuviel drinnen.

Außerdem kannst du es mal mit

CSS:

float: left;

bei den Boxen versuchen.

tutto · 03.10.2015

OK, die schließenden DIVs habe ich raus. Aber mit »float left« komme ich da nicht weiter.

dn3d_fanboy · 03.10.2015

tutto schrieb:
OK, die schließenden DIVs habe ich raus. Aber mit »float left« komme ich da nicht weiter.

Funktioniert bei mir einwandfrei: https://jsfiddle.net/h5jebeyp/
(Achtung: ich habe das HTML und CSS leicht geändert)

Was für dich aber auch interessant sein könnte sind Flexboxes:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

tutto · 04.10.2015

Es wäre nett wenn Du mir das hier zeigen könntest - dn3d_fanboy