Question

我正在尝试将一列对齐，然后在我的图片中的表格中右侧有两行。红色和蓝色的盒子都应该是高度的50％和宽度的60％。（抱歉粗糙的照片，Photoshop在我身上瞎扯，油漆不是我的强项）我试图创建表，但似乎只能在行中获取它。

同样在其中一个框中，我有文字，我想要在桌子的底部。我试图使用vertical-align:bottom;来实现这一点，但我不确定这是否是实现此目的的最佳方式。

我知道这是一个简单的问题，但无法解决这个问题。这是我的小提琴：http://jsfiddle.net/DPMC87/fmx9o2a2/

Answer 1

此布局不需要表格甚至是flexbox！你可以使用一些花车完成它，它仍然保持完全响应。

以下是最终结果的屏幕截图：

这里是生成该结果的代码的现场演示：

＆＃13;

html, body {
    margin: 0;
}

html, body, #outer {
    width: 100%;
    height: 100%;
}

#blk {
    height: 100%;
    width: 40%;
    float: left;
}
#red, #blu {
    height: 50%;
    width: 60%;
    float: right;
}

#blk {
    background: black;
}

#red {
    background: red;
}

#blu {
    background: blue;
    color: white;
}
#blu > span {
    position: absolute;
    bottom: 0;
    padding: 10px;
}

＆＃13;

<div id="outer">
    <div id="blk"></div>
    <div id="red"></div>
    <div id="blu"><span>Text aligned bottom</span></div>
</div>

＆＃13;

JSFiddle版本：https://jsfiddle.net/229zjpj7/

Answer 2

表格布局也是实现目标的好方法。但我更喜欢使用浮动属性。

是的，我们现在使用了固定高度的块，在我的代码中它是200px，并且使用固定高度不是一个好选择。我会写小JS，因为它可以自己计算高度。或者两列的高度js相同。

HTML

<div class="column-wrap">
    <div class="column"></div>
    <div class="column">
        <div class="box"></div>
        <div class="box align">
            <div class="holder">
                I am verticall bottom aligned
            </div>
        </div>
    </div>
</div>

CSS

.column-wrap {
    overflow: hidden;
    color: #fff;
    text-align: center;
}
.column {
    float: left;
    width: 60%;
    height: 200px;
}
.column:first-child {
    width: 40%;
    background :red;
    height: 200px;
}
.box {
    height: 50%;
    background : blue;
}
.box:first-child {
    background : black;
}
.align {
    white-space: nowrap;
}
.align:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    marin-right: -0.25em; /* margin because inline block element takes 4px space for it. */
}
.align .holder {
    display: inline-block;
    vertical-align: bottom;
    white-space: normal;
}

这是一个小提琴的链接。 http://jsfiddle.net/fmx9o2a2/6/

Answer 3

不需要漂浮物来做到这一点！

您可以执行此操作with flexbox。

使用flexbox over floats有一些好处：

更少CSS
没有clearfix hacks
Flexbox更适合您的用例

.container {
    display: flex;
    height: 500px;
}

.left {
    flex: 1;
    background-color: black;
}

.right {
    flex: 1.5;
    display: flex;
    flex-direction: column;
}

.right__red {
    flex: 1;
    background-color: red;
}

.right__blue {
    flex: 1;
    background-color: blue;
}

<div class="container">
    <div class="left"></div>
    
    <div class="right">
        <div class="right__red"></div>
        <div class="right__blue"></div>
    </div>
</div>

关键是将.right div设置为.left div宽度的1.5倍。这将给它60％的宽度。

使用flex-direction: column允许红色和蓝色单元格占据容器高度的50％，无论它有多高。

Here是有关flexbox的重要信息来源。在某些方面，我认为flexbox比浮点数高出一步，这比基于表格的布局高出一步。

Answer 4

解释见表。

html {
  box-sizing: border-box;
  font: 400 16px/1.4'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
}
body {
  width: 100vw;
  height: 100vh;
}
.main {
  table-layout: fixed;
  border-collapse: collapse;
  height: 100%;
  width: 100%;
}
.black {
  background: black;
  width: 40%;
}
.blue {
  background: blue;
  width: 60%;
  height: 50%;
}
.red {
  background: red;
  width: 60%;
  height: 50%;
}
td {
  color: white;
  vertical-align: bottom;
}

<table class="main">
  <tbody>
    <tr>
      <td class="black" rowspan='2'>
        <h3><u>It's Very Responsive</u></h3>
        <p>This is the 1st column. To extend this cell, use the rowspan attribute.</p>
        width: 40% height: 100%
      </td>
      <td class="blue">
        <h3><u>It's Designed Tight, No Misalignments</u></h3>
        <p>This is the second column and the first row.</p>
        width: 60% height: 50%
      </td>
    </tr>
    <tr>
      <td class="red">
        <h3><u>There are Essential Properties in .Main</u></h3>
        <p>This is the second column and the second row.</p>
        width: 60% height: 50%
      </td>
    </tr>
  </tbody>
</table>

表创建，如何将一列左对齐并在右侧有两行

4 个答案: