Question

我目前正在阅读Headfirst CSS / HTML，并且我遇到了一个示例问题。

我尝试使用float：left将身体浮动到侧边栏的左侧;但是它没有正常浮动。我已经浏览了HTML和CSS，我无法理解错误。

这就是我想要的样子：

小提琴：https://jsfiddle.net/Taubin/7Lhz4wtd/

＆＃13;

#main {
  background: #efe5d0 url(images/background.gif) top left;
  font-size:  105%;
  padding:    15px;
  margin:     0px 10px 10px 10px;
  width:      420px;
  float:      left;
}

＆＃13;

<div id="allcontent">
  <div id="header">
  </div>
  <div id="sidebar">
    <p class="beanheading">
      Sidebar text
    </p>
    <p>
      Sidebar text
    </p>
  </div>
  <div id="main">
    <h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
    <p>
      Main text
    </p>
  </div>
</div>

＆＃13;

任何建议都将不胜感激。

Answer 1

首先，可能是您要添加边距和填充的问题，即使框的宽度为420px，您也必须计算边距和填充，或者使用* { box-sizing: border-box; } ，它将计算该元素的宽度，作为所有尺寸（填充，边距，宽度）的总和，而不是超过宽度。

其次，浮动时元素的顺序很重要，将main始终放在侧边栏的顶部，因为元素从顶部到底部开始，当浮动顶部元素时，底部元素如果它更宽，则会折叠并对齐用主盒子。

参考屏幕截图：

Answer 2

#sidebar {
    background:  #efe5d0 url(images/background.gif) bottom right;
    font-size:  105%;
    padding: 15px;
    margin: 0px 10px 10px 0px;
    float: right;
    width: 290px;
}

Answer 3

这是https://jsfiddle.net/bg2v0dqn/。

你不应该在保证金上添加很大的差距。

以下是我改变的内容：

#main {
  background:       #efe5d0 url(images/background.gif) top left;
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 10px;
  width:            420px;
  float:            left;
}

#sidebar {
  background:       #efe5d0 url(images/background.gif) bottom right;
  font-size:        105%;
  padding:          15px;
  margin:           0px 10px 10px 0;
    width: 290px;
    float: right;
}

Answer 4

试试这个CSS代码

(gdb) p $2[4]
$3 = 4

HTML / CSS float：left;工作不正常

4 个答案: