Question

我正在使用谷歌浏览器浏览器，我正在使用mozilla顶针进行编码因为我的导师告诉我们在那里做，即使我更喜欢记事本。

所以......我正试图让这两个div相互浮动。

这是网站 - https://jasminebanares.makes.org/thimble/MTM0MDgwMTAyNA==/mini-blog

这是html：

    <div id="content">

     <div id="1">
      <p id="date" align="right">Friday - 13 Jun 2014</p>
      <p id="blog" align="center">Kaila didn't sit with us at recess today. At lunch she sat with for a short perod of time then Anna invited her to sit wth them and she tagged along. <br />Mylene said I got a 100% on the science test yesterday. Then I came across my other friends and they said the same thing. hhmmm.... I'll just wait until monday.</p>
      <p id="feeling">feeling 'DISAPPOINTED and EAGER'</p>
    </div>
    <div id="2">
      <p id="date" align="right">Thursday - 12 Jun 2014</p>
      <p id="blog" align="center">Met this new Filipino girl at recess today. Her name is Kaila. She's in 3 of my classes. I wonder what she's like...</p>
      <p id="feeling">feeling 'ANXIOUS'</p>
     </div>

  </div>

CSS：

    #content {
    border-radius:20px;
    background:white;
    opacity:0.6;
    overflow:auto;
    position:absolute;
    top:30%;
    left:20%;
    right:5%;
    height:70%;
    width:75%;}

  #date {
    font-family: 'Didact Gothic', sans-serif;
    font-size:10px;
    color:#7A7A7A;}

  #blog {
    font-family: 'Handlee', cursive;
    font-size:18px;
    color:black;}

  #feeling {
    font-family: 'Neucha', cursive;
    font-size:16px;
    color:#4D4D4D;}

  #1 {
    position:relative;
    width:45%;
    left:3%;
    right:4%;
    float:left;}
  #2 {
    position:relative;
    width:45%;
    right:3%;
    float:left;}

非常感谢你。如果有必要，请告诉我我所犯的任何错误并予以纠正..

再一次 - 提前致谢：）

Answer 1

设置50％（我在安全方面占49％）宽度为div

#1 {
    position:relative;
    width:45%;
    left:3%;
    right:4%;
    float:left;
    width:49%
}

#2 {
    position:relative;
    width:45%;
    right:3%;
    float:left;
    width:49%
}

Answer 2

您的代码是在正确的轨道上，问题是您使用的是以号开头的CSS ID选择器，该选择器无效且无法被浏览器读取。类选择器可以以数字开头，但不能以ID开头。如果ID以数字开头，这并不意味着ID不会在HTML中工作，这只意味着CSS无法直接将它们作为选择器读取。

这是 Fiddle showing the solution

例如：

#1 {
    /* CSS styles here */
}

将被忽略，因此div未显示应用于它们的样式。当这些div的ID更改为以字母开头时，它们会突然开始响应：

#div1 {
    /* CSS styles here */
}

如果由于某种原因无法更改您的ID，请点击handy way of selecting them anyway

顶针上的CSS浮动属性

2 个答案: