CSS包装s问题的行

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

我有这些数据:

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

html css
4个回答
4
投票

display:blockdisplay:inline-block定义为你的#row span因为span是inline element,默认情况下不接受widthheight

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


1
投票

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

你也试图在inline元素(span)上设置一个宽度,这是无法做到的。将其更改为blockinline-block


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>

我得到它的Out put


1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.