1

section{
	width:1300px;
	height: 350px;
	display: inline;
}

#img1 figcaption{
	text-align: center;
}

section #segsection{
	width: 1300px;
	height: 300px;
	display: inline;
	background-color: yellow;
}
<section>
	<div id="img1">
    <figure>
    	<img class="foto" src="imagenes/foto.jpg">
  		<figcaption>Dibujo dibujo</figcaption>
    </figure>
	</div>
</section>

<section id="segsection">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi excepturi possimus voluptates accusamus, sed quasi dolore esse labore repudiandae, necessitatibus, ducimus iure iste deserunt expedita quo ea voluptatem. Numquam, magnam?</p>
</section>

¿Cómo puedo poner color de fondo con un display inline?

No quiero cambiar el display porque no quiero que me haga salto de línea, o sea que inblick o me sirve.

2
  • Fundo de color y display son 2 cosas muy diferentes. Puedes dar un poco mas de detalles con codigo de ejemplo?
    – Einer
    Commented el 22 mar. 2018 a las 14:28
  • Puse dos section con display inline para que no haga salto de línea y no me coge el background, no sé si me explico.
    – Esther
    Commented el 22 mar. 2018 a las 14:38

2 respuestas 2

1

El problema es que el div al tener display: inline no ocupa espacio, tienes dos opciones:

  1. Cambiar a display: inline-block, de esta forma te respetará el alto y el ancho que tu estás declarando

section {
  width: 1300px;
  height: 350px;
  display: inline-block;
}

#img1 figcaption {
  text-align: center;
}

section#segsection {
  width: 1300px;
  height: 300px;
  display: inline-block;
  background-color: #FF0;
}
<section>
  <div id="img1">
    <figure>
      <img class="foto" src="https://lorempixel.com/200/100/nature/">
      <figcaption>Dibujo dibujo</figcaption>
    </figure>
  </div>
</section>

<section id="segsection">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi excepturi possimus voluptates accusamus, sed quasi dolore esse labore repudiandae, necessitatibus, ducimus iure iste deserunt expedita quo ea voluptatem. Numquam, magnam?</p>
</section>

  1. Decirle a tu elemento p que herede el color de fondo de su padre

section {
  width: 1300px;
  height: 350px;
  display: inline;
}

#img1 figcaption {
  text-align: center;
}

section#segsection {
  width: 1300px;
  height: 300px;
  display: inline;
  background-color: #FF0;
}

section#segsection p {
  background-color: inherit;
}
<section>
  <div id="img1">
    <figure>
      <img class="foto" src="https://lorempixel.com/200/100/nature/">
      <figcaption>Dibujo dibujo</figcaption>
    </figure>
  </div>
</section>

<section id="segsection">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi excepturi possimus voluptates accusamus, sed quasi dolore esse labore repudiandae, necessitatibus, ducimus iure iste deserunt expedita quo ea voluptatem. Numquam, magnam?</p>
</section>

Por último si tu elemento y su id están al mismo nivel debes ponerlos juntos de esta forma: section#segsection, y si quieres que tu código sea responsivo es mejor declarar un max-width en lugar de width

section {
  max-width: 1300px;
  height: 350px;
  display: inline-block;
}

#img1 figcaption {
  text-align: center;
}

section#segsection {
  max-width: 1300px;
  height: 300px;
  display: inline-block;
  background-color: #FF0;
}
<section>
  <div id="img1">
    <figure>
      <img class="foto" src="https://lorempixel.com/200/100/nature/">
      <figcaption>Dibujo dibujo</figcaption>
    </figure>
  </div>
</section>

<section id="segsection">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi excepturi possimus voluptates accusamus, sed quasi dolore esse labore repudiandae, necessitatibus, ducimus iure iste deserunt expedita quo ea voluptatem. Numquam, magnam?</p>
</section>

1

Tienes que eliminar el espacio entre el "section" y el identificador "#segsection". De la otra forma, estás indicando que el elemento con id=segsection debe ser un hijo del "section".

Además, el color se lo debes aplicar al elemento p hijo del section, de la siguiente forma.

section{
	width:1300px;
	height: 350px;
	display: inline;
}

#img1 figcaption{
	text-align: center;
}

section#segsection{
	width: 1300px;
	height: 300px;
	display: inline;

}

section#segsection p{
    background-color: yellow;

}
<section>
	<div id="img1">
    <figure>
    	<img class="foto" src="imagenes/foto.jpg">
  		<figcaption>Dibujo dibujo</figcaption>
    </figure>
	</div>
</section>

<section id="segsection">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi excepturi possimus voluptates accusamus, sed quasi dolore esse labore repudiandae, necessitatibus, ducimus iure iste deserunt expedita quo ea voluptatem. Numquam, magnam?</p>
</section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.