Div's Auto Dimensionaveís

Question

Div's Auto Dimensionaveís

Navigation

#1 by (0 votes)

3

I'm having a question, I'm creating a html where I will have 3 columns , but the user will resize it anyway you want, however automatically divs will have to auto adjust !

I'm using the resizable property of jqueryUI .

I would like to know if you can help me

#container {
	width:100%;
	text-align:center;
}

#left {
	float:left;
	width:32%;
	height: 20px;
	background: #000;
}

#center {
	display: inline-block;
	margin:0 auto;
	width:32%;
	height: 20px;
	background: #00ff00;
}

#right {
	float:right;
	width:32%;
	height: 20px;
	background: #7b8787;
}

<div id="container">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>

When stretching any of the divs to either side they should automatically adjust.

jquery html5 css3 jquery-ui

asked by anonymous 28.12.2015 / 18:04

1 answer

Mongodb stopping working Data and parameters between Views [closed]

score 0 · Answer 1

You can use the flexbox properties to do this, simply turn your container into a flex container, and then adjust your child elements with the flex property, which causes the "content to automagically fill the remaining space in the container"

Example from your code:

#container {
    width:100%;
  display: flex;
}

#left {
    width:32%;
    height: 20px;
    background: #000;
  flex: 1;
}

#center {
    width:32%;
    height: 20px;
    background: #00ff00;
  flex: 1;
}

#right {
    width:32%;
    height: 20px;
    background: #7b8787;
  flex: 1;
}

To learn more about flexbox, take a look at this project:

link

:)