1

我正在努力成为一名优秀的开发人员并且不使用表格，但我一直没有成功。这是我的尝试...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Because some people complain if I don't specify all the obvious tags</title>
</head>
<body>
    <div style="width:100%">
        <div style="background-color:Purple;width:25px;float:right"><input type="button" style="width:15px" /></div>
        <div style="background-color:Aqua"><input style="width:100%" /></div>
    </div>
</body>
</html>

这是我得到的输出。我希望输入框位于按钮的左侧，但不幸的是它在下方。

输出

为了演示我想要什么，如果我要使用表格，我会这样做：

<table style="width:100%">
    <tr>
        <td style="background-color:Aqua"><input style="width:100%;box-sizing: border-box" /></td>
        <td style="background-color:Purple;width:25px"><input type="button" style="width:15px" /></td>
    </tr>
</table>

预期产出

请注意：

  • 我无法更改 doctype 标签
  • 解决方案不能使用表
  • 无论包含 div 中指定的大小如何，这都应该有效，当前设置为 100%。

谢谢 ：）

4

2 回答 2

2

如果我像你一样有一个工作表布局，我会做这样的事情：

.layout-table
{
    display: table;
}
.layout-table > div
{
    display: table-row;
}
.layout-table > div > div
{
    display: table-cell;
}

进而：

<div class="layout-table" style="width:100%">
    <div>
        <div style="background-color:Aqua">
            <input style="width:100%;box-sizing: border-box">
        </div>
        <div style="background-color:Purple;width:25px">
            <input type="button" style="width:15px">
        </div>
    </div>
</div>

小提琴

当然，所有这些造型也可以在外部完成，但你明白了。这与您的表格布局相同，但它是使用 div 样式完成的，其行为类似于表格，将布局与内容分开。

实际上，我可能会很懒，只是使用<table role="presentation">，但这很糟糕（更不用说对你过时的文档类型无效了）。

于 2012-08-28T14:56:47.757 回答
2

当您使用 CSS 浮动元素时，您会将其从所谓的“文档流”中取出。所以基本上这里发生的事情是，水色盒子实际上是在黄色盒子后面延伸。见：http: //jsfiddle.net/hegvz/。结果是 aqua 框的宽度实际上比可见的要大，因此输入会扩展以填充渲染框的整个宽度。

您有几个选项可以解决此问题：

1）在非浮动框的侧面添加一个填充，等于浮动框的宽度，加上你想要的任何空白。示例：http: //jsfiddle.net/QVpnw/。您会看到 aqua 框仍延伸到黄色框的后面，但 aqua 框的输入现在已正确缩短。

2）在非浮动框的一侧添加一个边距，等于浮动框的宽度。这将导致水色框呈现白色空间，而不是颜色。在这种情况下，您还需要调整填充。http://jsfiddle.net/SVKr6/

于 2012-08-28T15:05:43.857 回答