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しなかったためです。widthheight

これをチェックしてくださいhttp://jsfiddle.net/2xufx/

于 2012-05-09T07:39:29.843 に答える
1

とを定義に追加する必要があります。また、それを機能させるには、に追加するoverflow: auto（または単にブロック要素にする）必要があります。#results#rowdisplay: 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を参照してください。

ただし、幅（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 に答える
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 に答える