colored background with inline display

Question

colored background with inline display

Navigation

#1 by (1 votes)
#2 by (1 votes)

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>

How can I put background color with an inline display?

I do not want to change the display because I do not want to make a line break, so inblick or serves me.

html css3

asked by Esther 22.03.2018 в 15:27

source

2 answers

Instanced properties vs in class, C orienting objects with glib (GTK +) how to update a data table by cleaning the records by clicking on a button?

score 1 · Answer 1

The problem is that the div to have display: inline does not occupy space, you have two options:

Change to display: inline-block , in this way you will respect the height and width that you are declaring

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>

Tell your% p item to inherit the background color of your father

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>

Finally if your element and its id are at the same level you should put them together in this way: section#segsection , and if you want your code to be responsive it is better to declare a max-width instead of 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>

score 1 · Answer 2

You have to eliminate the space between the "section" and the identifier "#segsection". In the other way, you are indicating that the element with id = segsection must be a child of the "section".

Also, the color should be applied to the child element p section, as follows.

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>