Question

我正在尝试创建一个包含2个相等列的页面。我正在使用div来创建表。我希望每列占据表宽的50％。我尝试了这个（和其他组合）并没有成功。

.tableview
{
    display:table;
    text-align:center;
}
.tablerow
{
    display:table-row;
}
.tablecell
{
    display:table-cell;
    width=100%;
}

和我的HTML ...

<div class="tableview">
    <div class="tablerow">
        <div class="tablecell">
            ABOUT ALYSSA
            buch of text buch of text buch of text buch of text buch of textbuch of text buch of text buch of text buch of textbuch of text
        </div>
        <div class="tablecell">
            <img src="images/alyssa.jpg" width=100%/>
        </div>
    </div>
</div>

Answer 1

您应该更正拼写错误（width: 100%;而不是width=100%;），并将每列宽度设置为50％。

.tableview {
  display: table;
  text-align: center;
  width: 100%;
}
.tablerow {
  display: table-row;
}
.tablecell {
  display: table-cell;
  width: 50%;
  vertical-align: top;
}

<div class="tableview">
  <div class="tablerow">
    <div class="tablecell">
      ABOUT ALYSSA buch of text buch of text buch of text buch of text buch of textbuch of text buch of text buch of text buch of textbuch of text
    </div>
    <div class="tablecell">
      <img src="images/alyssa.jpg" width=100%/>
    </div>
  </div>
</div>

Answer 2

更改为width: 50% width=100%

FIDDLE

由div创建的表上的等列宽度

2 个答案: