Machen Sie Kind füllen Eltern, ohne zu reagieren

Question

Ich versuche, meine Untertitel-Box die gleiche Größe wie mein Bild, ohne die Reaktionszeit des Flex-Slider, irgendwelche Vorschläge zu verlieren?

http://jsfiddle.net/bmBnF/10/

Mads K

Answer 1

ich es fixierte, indem sie einen Inline-Block und mit absoluter Positionierung zu machen. Dies macht es so, dass Sie es nicht mehr richtig schweben müssen. Außerdem habe ich das Border-Box-Ding hinzugefügt, so dass Ihre Füllung die Box nicht zu groß machen würde. display:inline-block; und border-box zusammen machen die CSS-Positionierung im Responsive Design wesentlich einfacher.

.flex-caption {position:absolute;display:inline-block;min-height:100%;width: 26%; padding: 2%; margin: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } 

Es gibt ein nettes kleines Tutorial Rand-Box ist hier: http://css-tricks.com/box-sizing/