2

我有这个数据：

<div id="results">
  <span id="row">
    <span id="left">left column</span>
  <span id="middle">middle text</span>
  <span id="right">right stuff</span>
  </span>
</div>

我试图效仿这一点：

这是我的 CSS 代码：

#results {
  width: 700px;
  margin: 0px auto;
  border: 1px solid black;
}

#row {
  width: 85%;
  margin: 0px auto;
  border: 2px solid green;
}

#left {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

#middle {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}

#right {
  float: left;
  width: 200px;
  margin: 5px 5px 5px 5px;
  border: 1px solid blue;
}
<div id="results">
  <span id="row">
        <span id="left">left column</span>
  <span id="middle">middle text</span>
  <span id="right">right stuff</span>
  </span>
</div>

问题是，结果是这样的！

它看起来很好，除了右侧跨度块的右侧，那个绿色块应该是#row包装器。为什么它不按应有的方式包装？

4

4 回答 4

4

定义display:block或display:inline-block到您的#row 跨度因为跨度是默认情况下inline element不采用width&的一个。height

检查这个http://jsfiddle.net/2xufx/

于 2012-05-09T07:39:29.843 回答
1

也许这可以帮助你

<html>
<head>
<style type='text/css'>
    #results    {width: 700px; margin: 0px auto; border: 1px solid black; min-height: 50px;}
    #row        {width: 92%; margin: 0px auto; border: 2px solid green; min-height: 30px;}
    #left       {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
    #middle     {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}
    #right      {float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue;}

</style>
</head>
<body>
<div id="results">
<div id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</div>
<div id="row">
<span id="left">left column</span>
<span id="middle">middle text</span>
<span id="right">right stuff</span>
</div>
</div>
</body>
</html>

我得到它的输出

在此处输入图像描述

于 2012-05-09T07:49:07.443 回答
1

您需要添加overflow: auto到#results和#row定义中，并且您还需要添加display: block到#row（或仅使其成为例如 a 的块元素<div/>）以使其工作。

CSS：

#results    { width: 700px; margin: 0 auto; border: 1px solid black; overflow: auto; }
#row        { display: block; width: 85%; margin: 0 auto; border: 2px solid green; overflow: auto;  }
#left       { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
#middle     { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }
#right      { float: left; width: 200px; margin:5px 5px 5px 5px; border: 1px solid blue; }​

请参阅此处的工作jsfiddle。

但请记住，宽度 (200px) + 边框 (2px) + 边距 (10px) = 212px，乘以 3 = 636px，700px 的 85% 是 595px，这就是它不适合的原因。

于 2012-05-09T07:42:17.667 回答
1

因为内部元素正在使用，所以float您必须“重置”。例如，通过overflow: hidden;在父级上使用。

此外，您正在尝试在inline元素 ( span) 上设置宽度，这是无法完成的。将其更改为block或inline-block。

于 2012-05-09T07:42:51.710 回答