html - 仅使用 CSS float 我的 div

Question

我试图让“聊天框” float 到 <main> 的右侧标记，在 Box1 和 NavBox 的对面。

如果我删除 Box1 或 NavBox 则它可以工作。否则我只能把它放到页面底部(当“ChatBox”在<main> 标签之后)，或者到右边(当在<main> 标签之前)，但它不会到顶部<main>框，它将开始向下约 200 像素。

唯一可以更改的 HTML 是将“ChatBox”移动到 <main> 附近标签。大多数情况下只能使用 CSS 完成。

http://jsfiddle.net/8em3m60m/26/

CSS

* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;
}
body {
    background:#000;
    font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
    color:#c2c2bd;
}
#wrapper {
    clear:left;
    max-width:999px;
    min-height:100%;
    margin:0 auto;
    border:0;
    text-align:left;
}
.mainnav, .box-1 {
    float:left;
    clear: left;
    vertical-align:top;
    width:180px;
    height:200px;
    margin: 18px 0 0 8px;
}
.chatbox {
    float:right;
    vertical-align:top;
    width:196px;
    min-height:200px;
}
.main {
    min-height:550px;
    padding-top: 40px;
    background: #7d7e7d;
    margin-top:100px;
}
.main-1{
    width: 548px;
    margin-left:194px;
    min-height:250px;
    background-color: #3f3f3f;
    padding:6px;
}

HTML

<div id="wrapper">
    <div id="box-1" class="nav box-1">Box 1</div>
    <nav id="navbar" class="nav mainnav">NavBox</nav>
    <main id="main" class="main" role="main">
        <div class="main-1">Main Content</div>
    </main>
    <div id="chatbox" class="chatbox">ChatBox</div>
</div>

编辑: 我可以做的唯一可能的 HTML 更改是将 ChatBox 移动到 <main> 上方或下方标签。

Answer 1

使用绝对定位

如果你想保持你呈现的 HTML，你可以使用绝对定位，如下所示。

您需要将 position: relative 应用于 #wrapper，然后为 .chatbox 使用合适的顶部和右侧偏移。

您需要为包装器指定一个宽度或最小宽度，否则您将得到一些与绝对定位元素重叠。

此解决方案可能有效，但它取决于您对灵 active 和响应能力的其他要求。

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background: #000;
  font: normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
  color: #c2c2bd;
}
#wrapper {
  clear: left;
  width: 999px;
  min-height: 100%;
  margin: 0 auto;
  border: 0;
  text-align: left;
  position: relative;
}
.mainnav,
.box-1 {
  float: left;
  clear: left;
  vertical-align: top;
  width: 180px;
  height: 200px;
  margin: 18px 0 0 8px;
  outline: 1px dotted yellow;
}
.chatbox {
  vertical-align: top;
  width: 196px;
  min-height: 200px;
  outline: 1px dotted yellow;
  position: absolute;
  right: 8px;
  top: 18px;
}
.main {
  min-height: 550px;
  padding-top: 40px;
  background: #7d7e7d;
  margin-top: 100px;
  outline: 1px dashed yellow;
}
.main-1 {
  width: 548px;
  margin-left: 194px;
  min-height: 250px;
  background-color: #3f3f3f;
  padding: 6px;
}

<div id="wrapper">
  <div id="box-1" class="nav box-1">Box 1</div>
  <nav id="navbar" class="nav mainnav">NavBox</nav>
  <main id="main" class="main" role="main">
    <div class="main-1">Main Content</div>
  </main>
  <div id="chatbox" class="chatbox">ChatBox</div>
</div>