Enlarge div according to content with css

Question

Enlarge div according to content with css

Navigation

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

1

It turns out that I have a section where I'm putting a kind of image gallery. The parent container of all has a height of 600px, and inside has two other containers that contain the images, the problem is that as you increase the images, obviously the container of the images changes alto.

How could I make the parent container, ie the section, automatically enlarge depending on the content?

Thanks

  /* PORTFOLIO */

    .portfolio{

	height: 500px;
	background:#f2f2f2;
	padding:20px;
	

    }

    .portfolioTitulo{

	text-align: center;
	margin-top: 15px;
	margin-bottom: 20px;
	font-weight: 300;
	font-size: 35px;

    }

    .trabajo{

	width: 30%;
	margin-bottom: 20px;
	margin-right:3px;

    }

    .thumb{

	width: 100%;
	margin-bottom: 10px;

    }

    .thumb img {

	width: 100%;
	vertical-align: top;
	border-radius: 3px;

    }


    .contenedorPortfolio2{

	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	
    }

    <section class="portfolio">

    		<div class="contenedorPortfolio">
    			
    			<h1 class="portfolioTitulo">Portfolio</h1>

    			<div class="contenedorPortfolio2">

    				<div class="trabajo">
    							
    					<div class="thumb">
    						<img src="http://lorempixel.com/500/500/">
    					</div>
    				
    				</div>
    				
    				<div class="trabajo">
    							
    					<div class="thumb">
    						<img src="http://lorempixel.com/500/500/">
    					</div>
    					
    				</div>
    				
    				<div class="trabajo">
    							
    					<div class="thumb">
    						<img src="http://lorempixel.com/500/500/">
    					</div>
    					
    				</div>

    				<div class="trabajo">
    							
    					<div class="thumb">
    						<img src="http://lorempixel.com/500/500/">
    					</div>
    					
    				</div>

    				<div class="trabajo">
    							
    					<div class="thumb">
    						<img src="http://lorempixel.com/500/500/">
    					</div>
    					
    				</div>

    				<div class="trabajo">
    							
    					<div class="thumb">
    						<img src="http://lorempixel.com/500/500/">
    					</div>
    					
    				</div>

    			</div>
    		
    		</div>

    	</section>

html5 css div

asked by Julio Guzman 13.03.2018 в 23:40

source

2 answers

0

.portfolio{
height: auto;
background:#f2f2f2;
padding:20px;
}

answered by 13.03.2018 в 23:45

Because after sending variables by ajax and recovering by php, they will fly indefinitely. What does the Request.Form ["codproduct"] do on asp.net?

score 0 · Accepted Answer

div{background: #ff015b; height: auto; padding: 15px; margin-bottom: 15px;}

<div>
<img src="http://via.placeholder.com/350x150">
</div>
<div>
<img src="http://via.placeholder.com/140x100">
</div>
<div>
<p>
Lorem ipsum dolor sit amet, an everti salutandi eum, altera facilisis quo ad. Ad has eros facilis. Has graeci interesset no. Zril petentium ea vim, at sea saepe ignota intellegebat. Ad eum denique urbanitas pertinacia, est quis esse essent et, solum repudiare cu vel.

An facer iusto signiferumque nec. Est eligendi inciderint definitionem et. Ea ius melius vocent utamur, no legere nostro torquatos mea, nullam voluptatibus pri id. Ea mei assum vocent commune, nisl munere minimum ius ut.

Vis an libris iuvaret alienum, duo ne ceteros maiorum. Mei ex doming euismod 
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, an everti salutandi eum, altera facilisis quo ad. Ad has eros facilis. Has graeci interesset no. Zril petentium ea vim, at sea saepe ignota intellegebat. Ad eum denique urbanitas pertinacia, est quis esse essent et, solum repudiare cu vel.

An facer iusto signiferumque nec. Est eligendi inciderint definitionem et. Ea ius melius vocent utamur, no legere nostro torquatos mea, nullam voluptatibus pri id. Ea mei assum vocent commune, nisl munere minimum ius ut.

Vis an libris iuvaret alienum, duo ne ceteros maiorum. Mei ex doming euismod definitionem. Vis vide laudem ubique eu, euismod constituto cu qui. Ut qui minim aliquip, ea alii indoctum scribentur sed, mea no sonet torquatos. Mea et eirmod accusata antiopam. Et tantas dolore pri, ei numquam prodesset eos, iuvaret facilis ponderum at per. Copiosae oportere an vix, mel etiam dicam te.

Est nibh nihil graece no, per et falli doming erroribus, novum debitis explicari no his. Errem apeirian ex cum. Has ex eruditi disputando, vim utroque veritus vituperata ut. Vidit disputando mel at.

Duo an euismod delenit. Odio cibo probatus ut nam, ut sit autem iuvaret expetendis. Sea ne tota nobis mandamus, ius in legimus patrioque. Cum no dolor decore facete, mea id dicta intellegat interesset, cibo mazim noluisse ex vim. Eius definiebas ullamcorper et eum. Et cum solum exerci delenit, quo primis vivendo et, mel ei impedit adolescens. An est clita postulant, mei volutpat hendrerit ut.

Vel ex iuvaret adversarium conclusionemque. Pri diceret tibique dissentiet ei, et per modo fastidii, no sale ocurreret temporibus quo. Option explicari scripserit quo in, vix an liber debitis sadipscing, suas ornatus vituperatoribus has ne. Quis equidem ad his, assum timeam argumentum nam eu.

Cum ne omnium tibique. Dicunt voluptaria mel at. Cum at magna elitr, debitis accusamus similique nam te. Eu mea apeirian voluptatibus, mei id harum dicit philosophia. Altera quidam his et, has at eruditi nusquam. Ad iuvaret docendi adversarium mel, at eum blandit adipiscing philosophia.

Eos mucius scaevola id, eripuit vulputate ea cum. Qui no quot adipiscing incorrupte. Usu id mucius fabellas reprehendunt. Ullum inermis liberavisse eos at.

Mel ad quidam timeam, integre maiorum elaboraret mei ut. Mel eu omnes vituperatoribus, his at natum vocent. Eu ius simul percipit expetendis, eum cu meliore probatus adipisci, semper suavitate cum ut. Ne wisi dicant vix. Eum vivendo accusata suscipiantur at. Vix euismod percipitur ut, summo nominavi similique vis ex.
</p>
</div>

With height: auto, the div is adapted to the content it contains.