Question

我有这些数据：

<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包装器。为什么它不像它应该包装？

Answer 1

将display:block或display:inline-block定义为#row 范围，因为 span 是inline element，而不是width以height＆amp;

选中此http://jsfiddle.net/2xufx/

Answer 2

您需要将overflow: auto添加到#results和#row定义，还需要将display: block添加到#row（或者只是制作它是一个块元素，例如<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 here。

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

Answer 3

因为内部元素使用float，您必须“重置”。例如。在父母身上使用overflow: hidden;。

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

Answer 4

也许这可以帮到你

<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>

我得到它的Out put

enter image description here

CSS包装<span> s问题行</span>

4 个答案: