3列左浮动且全屏宽度相同答案

【问题标题】：3 columns with float left and the same width at full screen3列左浮动且全屏宽度相同
【发布时间】：2012-07-13 20:51:55
【问题描述】：

我有一个全屏布局，我想要的是 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 做到这一点吗？我必须为此使用表格吗？

【问题讨论】：

它是可能的，但是这个 html 是..奇怪的。我会给你一个简单的例子:)
您应该在提问之前搜索重复项：stackoverflow.com/…
一个小提示，除非您真的显示网格，否则不要使用表格标签。不要用表格构建布局，使用 divs

标签： css css-float

【解决方案1】：

您需要一个 div 并将其显示设置为 table 环绕在您的 ps 周围。

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.

【讨论】：

【解决方案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>

【讨论】：

他说：我要的是3个等宽的列并保持浮动
我明白了，但是如果他将来决定拥有超过 3 列，他会遇到问题。另外，为什么你有浮动左和位置？一种或另一种会起作用，当您将元素设置为浮动时，它会自动设置其位置。

【解决方案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>

谢谢。

【讨论】：