Question

我正在尝试获得这个三栏布局：

my layout

div1（绿色），其内容与左侧对齐
div2（蓝色），其内容与对齐
div3（品红色）内容与对齐

在每一列中，我有多个块元素（我的模型中的“羊”）。每个元素必须与“绝对”中间垂直对齐，无论它的大小如何：当红色虚线显示（或多或少......）时，我需要所有包含的元素使其居中于同一行。

我从头开始，但我不能使用任何“固定”尺寸。

感谢您的帮助。

编辑：我的非工作垃圾在http://jsfiddle.net/gV99f/6/

Answer 1

我不确定，但我认为这就是你所需要的。您需要使用表格或display: table，display: table-cell。

JsFiddle DEMO

Answer 2

您可以像这样使用新属性css3 flex：

HTML：

<div id="wrap">
    <div class="green"></div>
    <div class="blue"></div>
    <div class="cyan"></div>
</div>

CSS：

#wrap{
    height:50px;
    display:flex;
    align-items:initial;
}
#wrap div{
    flex:1;
}

DEMO：http://jsfiddle.net/6cae7/1/

如果你想调整大小，你可以使用flex-grow这样的属性：

CSS：

#wrap{
    height:50px;
    display:flex;
    align-items:initial;
}
#wrap div{
    flex-grow:1;
}
#wrap div:nth-child(2){
    flex-grow:3;
}

DEMO：http://jsfiddle.net/6cae7/3/

Answer 3

我认为你需要这样的 FIDDLE 。

试图做到这一点，只需通过对齐

就可以休息

<div class="container">
    <div class="left"><span>div 1</span><br/><img src="http://i49.tinypic.com/bgd4qr.jpg" border="0" alt="Image and video hosting by TinyPic"></a></div>
    <div class="center">div 2</div>
    <div class="right">div 3</div>
</div>

<强> CSS

.container {
    width:600px;
    height:200px;
    border:1px solid;
}
.left {
    width:150px;
    height:200px;
    background:magenta;
    float:left;
}
.left span{
      width:100px;
    float:left;
    text-align:left;
    margin-bottom:20px;
}
.left img{
    width:100px;
    height:100px;
    float:left;

}
.center {
    height:200px;
    width:300px;
    background:blue;
    float:left;
    text-align:center;
}
.right {
    height:200px;
    width:150px;
    background:green;
    float:right;
    text-align:right;
}

Answer 4

<强> Demo

HTML

<div class="wrapper">
    <div class="main">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="100" height="100" />
    </div>
    <div class="aside aside-1">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="200" height="200" />
    </div>
    <div class="aside aside-2">
        <img src="http://www.w3.org/Style/Woolly/woolly-mc.png" width="150" height="150" />
    </div>
</div>

CSS

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.main {
  background-color: deepskyblue;
   padding: 100px 0;
}

.aside-1 {
  background: gold;
    text-align: left;
    padding: 50px 0;
}

.aside-2 {
  background: hotpink;
    text-align: right;
    padding: 75px 0;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 2 0px;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

}

left-div | center-div |右边的div，每个人都垂直对齐

4 个答案: