css 中的 2 列布局，无浮动，绝对位置

发布于 2024-08-20 14:22:04 字数 210 浏览 3 评论 0原文

任何人有任何想法如何实现这一目标我想要这种效果，

<table>
  <tr><td width=100></td><td width=100></td></tr>
</table>

我可以用浮动或绝对位置来实现，但是没有这两个可以实现吗？

原文

Anybody any ideas how to achieve this
I want this effect

<table>
  <tr><td width=100></td><td width=100></td></tr>
</table>

I can do it with float, or position absolute, but can it be done without these two?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

楠木可依 2024-08-27 14:22:04

使用内联显示的列表，修复边距和填充，它应该可以正常工作。如果您想稍后扩展，这将允许您拥有两列以上的列。

<ul>
<li>First column</li>
<li>Second Column</li>
</ul>

CSS

li
{
display:inline;
}

不要忘记放置足够的边距/填充以使其看起来更好。

make use of a list displayed inline, fix margin and padding and it should work well. This will allow you to have more that two columns if you want to expand later.

<ul>
<li>First column</li>
<li>Second Column</li>
</ul>

CSS

li
{
display:inline;
}

Don't forget to put enough margin/padding to make it look better.

回复收藏 0 原文

征﹌骨岁月お 2024-08-27 14:22:04

<div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
</div>

当然IE除外

<div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
</div>

of course except IE

回复收藏 0 原文

偏爱自由 2024-08-27 14:22:04

找到了解决方案
css3 有一个解决方案 -moz-column-count: 2; -webkit 列数：2；但尚未得到广泛支持

回复收藏 0 原文

阿楠 2024-08-27 14:22:04

表格只能用于表格信息，您应该避免使用表格来创建布局，而应该使用基于 DIV 的布局。 在此处查看我的答案有关于此的更多详细信息。由于您要求的解决方案没有浮动，位置（这意味着div），我们剩下的唯一其他选择是表格，所以这里是您如何继续创建基于表格的两列布局。

 <table width="60%" border="1" align="center">
 <tr>
  <td width="50%" align="left">
    <table>
      <tr>
        <td>Colume One</td>
      </tr>
    </table>    
  </td>

  <td width="50%" align="left">
    <table>
      <tr>
        <td>Colume Two</td>
      </tr>
    </table>    
  </td>

 </tr>
</table>

同样，使用表格进行布局并不是一个好主意:)

Tables should only be used for tabular information, you should avoid using tables for creating layouts, instead you should use DIV-based layouts. See my answer here for more details about this. Since you have asked for a solution without floats, position (which means divs), the only other option we are left with is tables, so here is how you might go on to creating table based two column layout.

 <table width="60%" border="1" align="center">
 <tr>
  <td width="50%" align="left">
    <table>
      <tr>
        <td>Colume One</td>
      </tr>
    </table>    
  </td>

  <td width="50%" align="left">
    <table>
      <tr>
        <td>Colume Two</td>
      </tr>
    </table>    
  </td>

 </tr>
</table>

Again, using tables for layouts is not a good idea :)

回复收藏 0 原文

~没有更多了~