使用CSS float：left和float：right，或者使用CSS margin-left和position：absolute实现这个布局？

时间：2011-02-23 02:13:17

标签： html css position css-float

我想使用HTML和CSS在主题的左侧放置一些注释（例如，以下模型/图像中显示的'status'和'author'注释）：

example of desired layout

我更喜欢CSS而不是基于表格的布局。

注释应显示在之前（标题左侧），如上所示。

在HTML中，注释应位于之后相应的标题，例如如下（因为与主题相关的信息/内容通常是主题标题之后的内容）：

<h1>This is a section title</h1>
<div class="status">approved</div>
<div class="author">chris</div>
<p>This is some text. Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<h1>Different section title</h1>
<div class="status">rejected</div>
<p>Lorem ipsum.</p>

有（至少）两种可能性：

这些（或任何其他答案）中的哪一个是实现此布局的更好方法，以及为什么？

8 个答案:

答案 0 :(得分：8)

使用浮动解决方案。此处不应使用绝对定位，因为文本正在定位，布局取决于文本的大小。如果您的用户更改其浏览器以放大文本大小，则布局将变形。如果你正在为可访问性设计页面，你需要特别注意这一点（考虑使用％而不是px来表示大小），但一般来说，只有当它是你想要的唯一方法时才使用绝对定位。 / p>

了解如何正确使用浮点数的重要资源是this smashing magazine article。我暂时给它加了书签，我用它作为参考。

答案 1 :(得分：4)

无需position:absolute。 float:left将最适合这种情况。也不需要float:right。此解决方案跨浏览器兼容。它适用于所有浏览器，包括怪异模式。让我知道这对您有用或者您需要进行任何更改。

检查http://jsfiddle.net/PyHGy/9

处的工作示例

如果HTML订单对于您必须在相应标题后添加注释很重要，那么我们需要将position:absolute添加到.statusContainer，然后调整.titleContainer中的边距。这也是一种跨浏览器兼容的解决方案。

检查http://jsfiddle.net/PyHGy/8/

处的工作示例

答案 2 :(得分：3)

是的，你可以用css实现你想要的东西，即：花车。但是，您需要为块元素指定宽度。

玩它。在最简单的级别，将所有宽度设置为50％（可能更少取决于填充）并添加float：left和float：在适用的位置。

答案 3 :(得分：2)

未经测试，但这应该有用。如果不是，我可以编辑修复。

HTML：

<div class="section">
  <h1>This is a section title</h1>
  <div class="info">
     <div class="status">approved</div>
     <div class="author">chris</div>
  </div>
  <div class="body">
    <p>This is some text. Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
  </div>
</div>

CSS：

.section {
  overflow: auto; /* so that the height and width calculate floats properly, otherwise the height will be nothing since all elements are floating */
  width: 700px; /* or total width */
}

/* this could be simplified if you didn't want the <h1> right near the .info, by putting the <h1> inside .body and removing the .section h1 from this */
.section h1, .section .body {
  float: right; 
  width: 500px; /* whatever */
}

.section .info {
  float: left;
  width: 200px; /* whatever */
}

答案 4 :(得分：1)

我认为这里没有一个全面的“正确”答案。这篇文章中有很多好的评论和例子，以及浮动和位置之间的利弊。

我提供了一个依赖CSS继承（和float）的工作示例。它使得HTML标记非常简洁，易于访问，并且在编辑/修订到期后很长时间内很容易阅读。 HTML如下：

<div class="author">
    <h3>This is a section title</h3>
    <span class="status">
        <p>(status: approved)</p>
        <p>(author: chris)</p>
    </span>
    <p>This is some text. Lorem ipsum. Lorem ipsum.</p>
</div>

此处的工作代码：http://jsfiddle.net/kz8dG/4/。

答案 5 :(得分：1)

正如其他人所说，在这种情况下你应该使用浮动。我想如果你稍后再查看代码，那么如果你使用浮动元素会更容易理解。

我建议你使用液体布局，而不是将截面的宽度设置为常数px：http://jsfiddle.net/9j5jd/

此解决方案的优点：

  • 这些部分使用容器的100%-(width of status text)宽度
  • html元素的顺序不变

您可以将状态宽度设置为%或em，我使用150px。我没有为部分设置一个恒定的高度，如果你愿意，你可以这样做。

代码（与jsfiddle相同）：HTML：

<div class="section">
    <div class="header"><h1>This is a section title</h1></div>
    <div class="status">approved</div>
    <div class="author">chris</div>
    <div class="content"><div class="inner">
        <p>This is some text. Lorem ipsum.This is some text. Lorem ipsum.This is some text. Lorem ipsum.This is some text. Lorem ipsum.This is some text. Lorem ipsum.This is some text. Lorem ipsum.</p>
        <p>Lorem ipsum.</p>
        </div></div>
</div>
<div class="section">
    <div class="header"><h1>Different section title</h1></div>
    <div class="status">rejected</div>
    <div class="content"><div class="inner">
        <p>Lorem ipsum.</p>
        </div></div>
</div>

CSS：

/* Position */
.header, .content {
    float: right;
    width: 100%;
    margin-left: -150px;
}
h1, .inner {
    margin-left: 150px;
}
h1 {
    clear: both; 
}
.status, .author {
    float: left;
    width: 130px;  
    clear: left;
    text-align: right;
    padding-right: 20px;
}

/* Decoration */
h1 {
    color: #365F91;
    font-size: 1.2em;
    margin-bottom: 0.3em;
    font-weight: bold;
}
.status, .author {
    font-size: 0.8em; 
}
.status:before {
    content:"(status: ";
}
.author:before {
    content:"(author: ";    
}
.status:after, .author:after {
    content:")";
}
.section {
    float: left;
    margin-top: 0.5em; 
}

答案 6 :(得分：0)

这是基于aharon's answer的解决方案。这是一个细微的改进，其中：

  • 使用.section > *子选择器将所有内容浮动（这样就无需显式引用.section h1标题元素[s]和.section .body div）

  • 从HTML

    • 中删除<div class="body">

  • 添加.section > *:first-child { margin-top: 0 }，以便标题和.info具有相同的margin-top值（任何此类保证金都应该应用于.section，而不是仅应用于<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .section { overflow: auto; } .section > * { float: right; width: 80%; /* whatever */ } .section > *:first-child { margin-top: 0 } .section .info { float: left; width: 20%; /* whatever */ } </style> </head> <body> <div class="section"> <h1>This is a section title</h1> <div class="info"> <div class="status">approved</div> <div class="author">chris</div> </div> <p>This is some text. Lorem ipsum.</p> <p>Lorem ipsum.</p> </div> <div class="section"> <h1>Next section title</h1> <div class="info"> <div class="status">rejected</div> </div> <p>This is some text. Lorem ipsum.</p> <p>Lorem ipsum.</p> </div> </body> </html> 标题）

以下是代码：

{{1}}

或者使用绝对宽度，如aharon的答案所示，而不是相对宽度。

答案 7 :(得分：-1)

不幸的是，使用float向右移动大部分内容，如其他答案中所示，会产生不必要的副作用：它会阻止通常的'margin collapse'，这会发生在元素上是正常的流程，但不会发生漂浮的元素。

另一种选择如下。

使用margin-left创建一个大的边距（不要使用left，因为这会导致块太宽，溢出右边的边缘;而增加边距会使相应减少内容区域）。并且，指定relative定位（使用零左/右/上/下偏移）来创建/开始新的堆叠上下文，以便.section .info相对于每个.section定位：

.section
    {
        overflow: visible;
        position: relative;
        margin-left: 200px;
    }

使用absolute定位将.section .info放置在其包含块的左侧和顶部：

.section .info
    {
        position: absolute;
        top: 0px;
        left: -200px;
        width: 180px;
        height: 100%
        text-align: right;
        font-size: smaller;
    }

.section .info的绝对定位使其脱离正常流量，并且<h1>和<p>之间的边距会崩溃。

以下是完整的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="./user.css" /> 
    <style type="text/css">
    .section
        {
            overflow: visible;
            position: relative;
            margin-left: 200px;
        }
    .section > *:first-child 
        {
            margin-top: 0
        }
    .section .info
        {
            position: absolute;
            top: 0px;
            left: -200px;
            width: 180px;
            height: 100%
            text-align: right;
            font-size: smaller;
        }
    </style>
</head>
<body>
<div class="section">
    <h1>1st section title</h1>
    <div class="info">
        <div class="status">approved</div>
        <div class="author">chris</div>
    </div>
    <p>This is some text. Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
    <p>Lorem ipsum.</p>
</div>
</body>
</html>
相关问题
最新问题