Question

我正在努力获得＆＃34; ChatBox＆＃34;浮动到<main>标签的右侧，Box1和NavBox的对面。

如果我删除Box1或NavBox，那么它可以工作。否则我只能将它放到页面底部（当＃34; ChatBox＆＃34;在<main>标签之后），或者在右边（在<main>标签之前），但是它不会进入<main>框的顶部，它将开始下降约200px。

唯一可以更改的HTML是移动＆＃34; ChatBox＆＃34;关于<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更改是在<main>标记的上方或下方移动ChatBox。

Answer 1

如果不对HTML进行重组（我强烈建议;它有点无意义且无意义），您可以通过这种方式实现您的目标：

JSFiddle Example

* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body {
    background:#000;
    font:normal 11px/13px Arial, Verdana, Lucida, Helvetica, sans-serif;
    color:#c2c2bd;
}
#wrapper {
    max-width: 999px;
    min-height: 100%;
    margin: 0 auto;
}
.box-1, .mainnav {
    float: left;
    clear: left;
    width: 180px;
    height:200px;
    vertical-align:top;
    margin: 18px 0 0 8px;
}
.chatbox {
    float:right;
    position: relative;
    top: -200px;
    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: #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>
    <div id="chatbox" class="chatbox">ChatBox</div>
    <main id="main" class="main" role="main">
        <div class="main-1">Main Content</div>
    </main>
</div>

我已将.chatbox元素移到.main之上，并已将其position: relative;移至200px并将其移动到通常所在位置的顶部位置上方，因此它与Box 1一致。更好的方法是不需要position属性，将.box-1和.nav包含在一个包含元素中{{1将包含的元素留下，然后将float元素移到.chatbox元素上方并将.main移到右侧。

Answer 2

使用绝对定位

如果要保留所显示的HTML，可以按如下方式使用绝对定位。

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

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

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 3

我通常会使用position：absolute来让聊天框在右边的顶部对齐。你的CSS就是;

.chatbox {
position:absolute;
top: 0;
right: 0;
width:196px;
min-height:200px;
}

这会将它与聊天框的父元素的右上角对齐。

仅使用CSS浮动我的div

3 个答案: