Wie behalte ich einen Div-Inline-Block mit einem Bild darin?

Question

.parent{
background:silver;
text-align:center;
display:inline-block;
}

.child{
background:gold;
display:inline-block;
}

.imginside{
display:inline-block;
width:50%;
}

<div class='parent'>
<div class='child'>

<img class='imginside' src='https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg' alt='img'>

</div>

</div>

Wenn sich ein Text in child befindet, ist er inline-block.

Befindet sich ein Bild in child - wird child zu block (Hintergrundgold ist 100% breit).

Wie behalte ich child - inline-block mit einem Bild im Inneren?

html css

2

blueSky 30 Juni 2018 im 10:28

Answer 1

Erstens bleibt mit dem Bild im Kind inline-block. Überprüfen Sie zur Überprüfung das untergeordnete Element (verwenden Sie devtools auf Chrome). Im Elementstil wird display:inline-block angezeigt. Das Problem ist, dass Sie dem Bild width:50% gegeben haben. Versuchen Sie, absolutere Einheiten wie px zu verwenden. Ich habe ein funktionierendes Beispiel geliefert:

.parent{
background:silver;
text-align:center;
display:inline-block;
}

.child{
background:gold;
display:inline-block;
}

.imginside{
display:inline-block;
padding:10px;
}

<div class='parent'>
<div class='child'>

<img class='imginside' src='https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg' alt='img'>

</div>

</div>

Es funktionierte für Text, da Sie ihm keine% Breite gegeben hatten. Hoffe, das klärt die Dinge.

3

Arex 30 Juni 2018 im 07:54

Answer 2

Fügen Sie einfach width:50% zum div hinzu und erstellen Sie das Bild max-width:100%;

.parent {
  background: silver;
  text-align: center;
  display: inline-block;
}

.child {
  background: gold;
  display: inline-block;
  width: 50%;
}

.imginside {
  display: inline-block;
  vertical-align:top;
  max-width: 100%;
}

<div class='parent'>
  <div class='child'>

    <img class='imginside' src='https://static.businessinsider.com/image/50db38a069bedd0d1000000c-750.jpg' alt='img'>

  </div>

</div>

2

Temani Afif 30 Juni 2018 im 08:02

Answer 3

Füge eine Auffüllung in .imginside hinzu

.imginside{
display:inline-block;
width:50%;
padding: 10px;
}

-2

Hartanto 30 Juni 2018 im 07:49

Wie behalte ich einen Div-Inline-Block mit einem Bild darin?

3 Antworten

Verwandte Fragen

Neue Fragen

html