Question

我有一个全屏布局，我想要的是3个具有相同宽度并且悬空的柱子。

我拥有的是：

<div class="table_small" style="float:left; margin-right:20px;">
<p>lipsum</p></div><div class="table_small" style="float:left; margin-right:20px;">
<p>lipsum</p></div><div class="table_small" style="float:left;"><p>lipsum</p></div>

没有浮动且宽度为100％的一个div工作正常。

不能用div执行此操作吗？我是否必须使用表格？

Answer 1

您的div显示设置为table，需要一个p。

HTML

<div class="table_small">
    <p>lipsum</p>
    <p>lipsum</p>
    <p>lipsum</p>
</div>

CSS：

.table_small
{
    width: 100%;
    display: table;
}

.table_small p
{
    display: table-cell;
    border: 1px dashed #000;
}

父元素<div class="table_small">必须具有设置的宽度才能生效。

Demo for you here

Answer 2

<div class="row">
    <div class="column1" style="float:left; left:0px; width:33%"></div>
    <div class="column2" style="float:left; left:33%; width:33%"></div>
    <div class="column3" style="float:left; left:66%; width:33%"></div>
</div>

Answer 3

尝试此代码可能对您有所帮助。您可以根据需要修改样式属性。

<html>
<body style="width:100%; margin:0px;">
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;">
<p>lipsum</p></div>
<div class="table_small" style="float:left; margin:0 10px; border:1px solid; width:31.7%;">
<p>lipsum</p></div>
<div class="table_small" style="float:left; margin:0 10px; border:1px solid;width:31.7%;"><p>lipsum</p></div>
</body>
</html>

感谢。

3列，左侧浮动，全屏宽度相同

3 个答案: