Css 不使用表的简单两列html布局_Css_Html

Css 不使用表的简单两列html布局

css html

Css 不使用表的简单两列html布局,css,html,Css,Html,我正在寻找一种超级简单的方法来创建两列格式，以便在网页上显示一些数据。如何实现与以下相同的格式： <table> <tr> <td>AAA</td> <td>BBB</td> </tr> </table> AAA BBB 我也对HTML5/CSS3技术持开放态度。 <style type="text/css"> #wrap { w

我正在寻找一种超级简单的方法来创建两列格式，以便在网页上显示一些数据。如何实现与以下相同的格式：

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>


AAA
BBB

我也对HTML5/CSS3技术持开放态度。


<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

#包裹{
宽度：600px；
保证金：0自动；
}
#左沟{
浮动：左；
宽度：300px；
}
#对{
浮动：对；
宽度：300px；
}
...
...

确保立柱宽度之和等于包裹宽度。或者，也可以使用宽度的百分比值

有关使用CSS的基本布局技术的更多信息，请查看此

如果您想要最简单的方法，只需将

<div class="left">left</div>
<div class="right">right</div>

.left {
    float: left;    
}

左
正确的
.左{
浮动：左；
}

尽管您可能需要更多，这取决于您有哪些其他布局要求。

如果您想用HTML5的方式来实现它（此特定代码更适用于博客，其中，

被多次使用，每个博客条目摘要使用一次；最终，元素本身并不重要，只有样式和元素放置才能获得所需的结果）：


文章{
浮动：左；
宽度：500px；
}
旁白{
浮动：对；
宽度：200px；
}
#包裹{
宽度：700px；
保证金：0自动；
}
这里的主要内容
这里有边栏


#内容{
明确：两者皆有；
宽度：950px；
垫底：10px；
背景：#fff；
溢出：隐藏；
}
#内容左{
浮动：左；
显示：内联；
宽度：630px；
利润率：10px；
背景：#fff；
}
#内容权{
浮动：对；
宽度：270px；
边缘顶部：25px；
右边距：15px；
背景#d7e5f7；
}

显然，您需要调整栏目的大小以适应您的网站以及颜色等，但这应该做到。您还需要确保您的ContentLeft和ContentRight宽度不超过内容宽度（包括边距）.

我知道这个问题已经得到了回答，但在讨论了布局之后，我想添加一个替代答案，用浮动元素解决一些传统问题

您可以在这里看到更新后的示例

无论您使用的是HTML4.01还是带有语义元素的HTML5，都没有区别（如果左侧和右侧容器尚未声明，则需要将它们声明为display:block）

CSS

.left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

HTML

<div class="left">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>

你可以用css表格代替html表格。这样可以保持html的语义正确，但也可以使用表格进行布局

这似乎比使用浮动黑客更有意义

<html>
  <head>
    <style>

#content-wrapper{
  display:table;
}

#content{
  display:table-row;
}

#content>div{
  display:table-cell
}

/*adding some extras for demo purposes*/
#content-wrapper{
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  position:absolute;
}
#nav{
  width:100px;
  background:yellow;
}
#body{
  background:blue;
}
</style>

  </head>
  <body>
    <div id="content-wrapper">
      <div id="content">
        <div id="nav">
          Left hand content
        </div>
        <div id="body">
          Right hand content
        </div>
      </div>
    </div>
  </body>
</html>


#内容包装器{
显示：表格；
}
#内容{
显示：表格行；
}
#内容>分区{
显示：表格单元格
}
/*为演示目的添加一些额外的内容*/
#内容包装器{
宽度：100%；
身高：100%；
顶部：0px；
左：0px；
位置：绝对位置；
}
#导航{
宽度：100px；
背景：黄色；
}
#身体{
背景：蓝色；
}
左手内容
右手内容

此代码不仅允许您添加两列，还允许您添加任意多的列，并将它们向左或向右对齐、更改颜色、添加链接等。还可以查看Fiddle链接

小提琴链接：

前面的所有答案只提供了第一列结束和第二列开始的硬编码位置。我本以为这不是必需的，甚至不需要

最新的CSS版本知道一个名为

columns

的属性，它使基于列的布局非常简单。对于较旧的浏览器，您还需要包含

-moz columns

和

-webkit columns

下面是一个非常简单的示例，如果每个列的像素宽度至少为200，则最多会创建三列，否则使用的列会更少：

<html>
  <head>
    <title>CSS based columns</title>
  </head>
  <body>
    <h1>CSS based columns</h1>
    <ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
      <li>Item eight</li>
      <li>Item nine</li>
      <li>Item ten</li>
      <li>Item eleven</li>
      <li>Item twelve</li>
      <li>Item thirteen</li>
    </ul>
  </body>
</html>


基于CSS的列
基于CSS的列

项目一
项目二
项目三
项目四
项目五
项目六
项目八
项目九
项目十
项目11
项目12
项目13

我知道这是一篇老文章，但我想我应该加上我的两个便士。很少使用和经常忘记的描述列表如何？通过简单的css，你可以得到一个非常干净的标记

<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>

看一看这个例子

现在有一个比五年前最初提出这个问题时简单得多的解决方案。CSS Flexbox使最初提出的两列布局变得简单。这是原始问题中表格的基本等价物：

<div style="display: flex">
    <div>AAA</div>
    <div>BBB</div>
</div>


AAA
BBB

Flexbox的一个优点是，它可以让您轻松地指定子元素应如何收缩和增长以适应容器大小。我将在上面的示例中展开，使该框成为页面的全宽，使左列的宽度至少为75px，并使右列的宽度增加以捕获剩余空间。我还将将样式合并到自己的适当块中，指定一些背景色，使列清晰可见，并为一些较旧的浏览器添加传统的Flex支持

<style type="text/css">
.flexbox {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.left {
    background: #a0ffa0;
    min-width: 75px;
    flex-grow: 0;
}

.right {
    background: #a0a0ff;
    flex-grow: 1;
}
</style>

...

<div class="flexbox">
    <div class="left">AAA</div>
    <div class="right">BBB</div>
</div>


.flexbox{
显示：-ms flex；
显示：-webkit flex；
显示器：flex；
宽度：100%；
}
.左{
背景：#a0ffa0；
最小宽度：75px；
flex-grow:0；
}
.对{
背景：#a0a0ff；
柔性生长：1；
}
...
AAA
BBB

Flex是相对较新的，因此，如果你不得不支持IE 8和IE 9，你就不能使用它。然而，截至本文撰写之时，表明94.04%的市场使用的浏览器至少部分支持它。

一些小的更改使其响应性更强<

.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}

.menu a{
color:#000000
}

.menuUl {
  list-style: none outside none;
  height: 34px;
}

.menuUl > li {
  display:inline-block;
  line-height: 33px;
  margin-right: 45px;

}

<html>
  <head>
    <title>CSS based columns</title>
  </head>
  <body>
    <h1>CSS based columns</h1>
    <ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
      <li>Item eight</li>
      <li>Item nine</li>
      <li>Item ten</li>
      <li>Item eleven</li>
      <li>Item twelve</li>
      <li>Item thirteen</li>
    </ul>
  </body>
</html>

<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>

<div style="display: flex">
    <div>AAA</div>
    <div>BBB</div>
</div>

<style type="text/css">
.flexbox {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.left {
    background: #a0ffa0;
    min-width: 75px;
    flex-grow: 0;
}

.right {
    background: #a0a0ff;
    flex-grow: 1;
}
</style>

...

<div class="flexbox">
    <div class="left">AAA</div>
    <div class="right">BBB</div>
</div>

<style type="text/css">
#wrap {
    width: 100%;
    margin: 0 auto;
    display: table;
}
#left_col {
   float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}
@media only screen and (max-width: 480px){
    #left_col {
       width:100%;
    }
    #right_col {
       width:100%;
    }
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

<div class="column">
       <!-- paragraph text comes here -->
</div>

.column {
    column-count: 2;
    column-gap: 40px;
}