CSS包装s问题的行

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因为span是inline element，默认情况下不接受width和height。

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

Answer 2

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

你也试图在inline元素（span）上设置一个宽度，这是无法做到的。将其更改为block或inline-block。

Answer 3

也许这可能对你有帮助

<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

Answer 4

你需要将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，这就是它不适合的原因。

CSS包装s问题的行

问题描述投票：2回答：4

4个回答

最新问题

CSS包装s问题的行

问题描述 投票：2回答：4

4个回答

最新问题

问题描述投票：2回答：4