[ERLEDIGT] DIV Breite an Inhalt anpassen

[pixelanstalt]

Hallo miteinander,

ich weiß, solche Themen wurden schon viel und oft behandelt, aber ich habe nach etlichen Foren leider keine erfüllende Antwort gefunden. Hoffentlich finde ich hier Rat. Das, was ich bisher gefunden habe behandelt nicht konkret mein Problem, oder aber ich hab es nicht verstanden.

Folgende Situation: Ich möchte gerne ein DIV, welches wiederholt an unterschiedlichen Stellen im HTML-Code vorkommt, an die Breite des darin vorkommenden Inhalts anpassen (nur Bilder). Idealerweise befinden sich darin 4 Bilder mit 170x100px und rundrum jeweils 4px border (genaue Angaben s. CSS-Code). Gesamtbreite sowohl des Haupt-DIVs 'content', als auch DIV 'box' sind 700px. Es kommt aber auch vor, dass vielleicht auch mal nur 3 Bilder vorkommen.
Mein Problem ist jedoch, dass der DIV 'box' die volle Breite hat und sich nicht an z.B. die Breite von max. 3 Bildern anpasst.

Hier die HTML-Struktur:

<div class="content">
    <div class="box">
        <img><img><img><img>
    </div>
</div>

und das dazugehörige CSS:

.content {
    position: relative;
    margin: 0 auto;
    width: 700px;
}
.box {
    height: 108px;
    -webkit-box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.3);
    box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.3);
}
.box>img {
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    border-left: 4px solid #fff;
    float: left;
}
.box>img:last-of-type {
    border: 4px solid #fff;
    float: none;
}

Da ich wohl mit HTML und CSS nicht weiterkommen werde und Javascript/jQuery für mich böhmische Dörfer sind, wäre ich dankbar für nützliche Hilfe. Das Problem habe ich eigentlich nur wg. des Gesamtschatten um den DIV 'box'...

Danke schonmal vorab
Ralf

P.S.: Nicht wundern - den Beitrag habe ich auch bei traum-projekt.com gepostet.

 

[Space Vampire]

Versuch es mal mit
display:table-cell;

 

[pixelanstalt]

Guter Ansatz. Danke schonmal dafür.
Allerdings entsteht jetzt am unteren Rand des DIVs ein unschöner Rand von 4px, den ich nicht wegbekomme.

Edit: ich habs grad mal mit

display:inline-block;

getestet und das scheint zu funktinoieren. Allerdings muss ich dann wiederum am padding des DIVs drehen...