Div’s Auto Dimensionaveís

Asked

Viewed 101 times

3

I’m having a question, I’m creating a page where I’ll have 3 columns, however the user will resize her any way she wants, however automatically as divs will have to themselves auto adjust!

I’m using the property resizable of jqueryui.

I wonder 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 I stretch any of the divs They should fit anywhere automatically.

jquery html5 css3 jquery-ui
  • 1

    Put the code you already have there for us to see how you are doing, and better understand what is happening

  • Would you have any problem doing this with table columns?

  • You want the internal columns to be resized in width and when the user is resizing the other columns should adjust as the layout or remain the same size creating a horizontal scroll?

  • Example if the user wants to expand the center column more to the left or to the right he can set the 2Div’s have to adjust so there is no white space.

  • I made an example with 3 columns, see if it helps Example:jsfiddle.net/afcv0come/

  • Valew ! That’s right only for both sides ..!

Show 1 more comment

1 answer

0

You can use the properties of flexbox to do this, just turn your container into a flex container, and then adjust your child elements with the flex property, which makes "content 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:

https://github.com/afonsopacifer/awesome-flexbox

:)

Browser other questions tagged jquery html5 css3 jquery-ui

You are not signed in. Login or sign up in order to post.