我试图让“聊天框” 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>
上方或下方标签。
最佳答案
使用绝对定位
如果你想保持你呈现的 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>
关于html - 仅使用 CSS float 我的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28756541/