3个div中间居中的两侧全部放在一个垂直居中的div中 [英] 3 divs middle centered sides zoomable all in one vertically centered div

问题描述

我花了近2天，不知道该怎么做。
这里是一些代码：

 < div id ='wrapper'> 
< div id ='left'> 
< / div 
< div id ='middle'> 
< div id ='centeredinmiddle'> 
< / div> 
< / div> 
< div id ='right'> 
< / div> 
< / div> 
  

我需要的是：
wrapper垂直居中，左和右zoomable可以说20％

我不确定它是否可靠，但我希望它是。

解决方案

http://jsfiddle.net / cJqAu /

更改浮动div的顺序 - >

 < div id ='wrapper'> 
< div id ='left'> 
 foo bar 
< / div> 
< div id ='right'> 
 bar foo 
< / div> 
< div id ='middle'> 
< div id ='centeredinmiddle'> 
 lorem ipsum dolor sit amet等等... 
< / div> 
< / div> 
< / div> 
  

并向右侧和左侧div添加一些小样式规则：

  #wrapper 
 {
 width：70％; 
保证金余额：15％; 
 / *这不是一个美丽而美好的尝试，但它可以工作* / 
} 
 #left 
 {
 float：left; 
宽度：10％; 
} 
 #right 
 {
 float：right; 
宽度：10％; 
} 
 #centeredinmiddle 
 {
 / *如果您很好地调整了其他样式，则不需要更多的样式规则;）* / 
} 
  

只需调整包装的宽度即可

i spend almost 2 days and have no idea how to do this. here is some code:

<div id='wrapper'>
  <div id='left'>
  </div
  <div id='middle'>
      <div id='centeredinmiddle'>
      </div>
  </div>
  <div id='right'>
  </div>
</div>

What i need is : wrapper centered vertically, left and right zoomable lets say 20% of window width each, middle static width: 700px, centeredinmiddle - centered horizontally in middle.

i am not sure is it poassible but i hope it is.

解决方案

http://jsfiddle.net/cJqAu/

change the order of your floated divs -->

<div id='wrapper'>
  <div id='left'>
      foo bar
  </div>
    <div id='right'>
    bar foo
  </div>
  <div id='middle'>
     <div id='centeredinmiddle'>
        lorem ipsum dolor sit amet and so on...
     </div>
  </div>
</div>

and add some small style rules to the right and left div:

#wrapper
{
  width: 70%;
  margin-left: 15%;
  /*this is not a beautiful and nice attempt, but it works*/
}
#left
{
  float: left;
  width: 10%;
}
#right
{
 float: right;
 width: 10%;
}
#centeredinmiddle
{
  /*no need for further style rules if you nicely adjust the others ;)*/
}

just adjust the width of wrapper and there you go

这篇关于3个div中间居中的两侧全部放在一个垂直居中的div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！