div并排放置失败

Question

我试图把两个div放在一起，但是我得到的是图片中显示的。

这是我的代码：

             <div id="leftColumnSvg ">
                <p> sdsadasd</p>
                <p> sdsadasd</p>
                <p> sdsadasd</p>
                <p> sdsadasd</p>
             </div> 

             <div id="rightColumnSvg">
                <svg width="160" height="160">
                  <circle cx="80" cy= "80" r="60" style="fill:#00cc00"/> 
                  ................

                </svg>
             </div>

我的CSS是：

#leftColumnSvg 
{
 background-color:red;
 width:200px;
 float:left;
}



#rightColumnSvg{   
 width:300px;
 float:right;
}

我认为它应该像这样显示here.

Answer 1

注意文本的背景颜色也不是红色。

您的ID属性值中有一个尾随空格，因此选择器根本不匹配。

＆＃13;

＆＃13;

#leftColumnSvg {
  background-color: red;
  width: 200px;
  float: left;
}
#rightColumnSvg {
  width: 300px;
  float: right;
}

＆＃13;

<div id="leftColumnSvg ">
  <p>sdsadasd</p>
  <p>sdsadasd</p>
  <p>sdsadasd</p>
  <p>sdsadasd</p>
</div>

<div id="rightColumnSvg">
  <svg width="160" height="160">
    <circle cx="80" cy="80" r="60" style="fill:#00cc00" />................

  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

当我删除它时，它可以正常工作。

＆＃13;

＆＃13;

#leftColumnSvg {
  background-color: red;
  width: 200px;
  float: left;
}
#rightColumnSvg {
  width: 300px;
  float: right;
}

＆＃13;

<div id="leftColumnSvg">
  <p>sdsadasd</p>
  <p>sdsadasd</p>
  <p>sdsadasd</p>
  <p>sdsadasd</p>
</div>

<div id="rightColumnSvg">
  <svg width="160" height="160">
    <circle cx="80" cy="80" r="60" style="fill:#00cc00" />................

  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;