我有一个像以下JavaScript对象:
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Run Code Online (Sandbox Code Playgroud)
现在我想通过所有回路p元素(p1,p2,p3...),并得到他们的键和值.我怎样才能做到这一点?
如有必要,我可以修改JavaScript对象.我的最终目标是遍历一些键值对,如果可能的话,我想避免使用eval.
我使用float:right(或left)多次浮动容器顶部的图像和嵌入框.最近我需要在另一个div的右下角浮动一个div,使用float得到的正常文本换行(文本包含在上方和左侧).
我认为这必须相对容易,即使浮点数没有底价,但我无法使用多种技术来做到这一点并且搜索网络除了使用绝对定位之外没有其他任何东西但是这不是给出正确的自动换行为.
我以为这将是一个非常常见的设计,但显然它不是.如果没有人有任何建议,我将不得不将我的文本分成单独的框并手动对齐div,但这是相当不稳定的,我不想在每个需要它的页面上进行操作.
编辑:给来这里的人留言.上面作为重复链接的问题实际上并不重复.文本环绕inset元素的要求使它完全不同.事实上,这里对最高投票答案的回应清楚地表明为什么相关问题的答案作为对这个问题的回答是错误的.无论如何,这个问题似乎仍然没有一般解决方案,但是这里和链接问题中发布的一些解决方案可能适用于特定情况.
我有一个带有段落和标题的文本容器.在页面的底部,我想将图像浮动到页面的右侧,而文本环绕图像.图像的底部应与最后一段的底部齐平.
页面宽度是可变的(响应),但图像尺寸是固定的.是否有可能在HTML和CSS中实现这一点(CSS3很好)?如果没有,可以用最少量的Javascript完成吗?
这是我想要完成的示意图:

HTML目前看起来像这样,但如果需要可以更改.我并不特别关心图像所在的文档中的位置.使用背景图像也可以.
<section>
<h2>...</h2>
<p>... ...</p>
<p>... ...</p>
...
<img src="...">
</section>
Run Code Online (Sandbox Code Playgroud)
当我float: right在图像上设置时,它会向右浮动,但我无法将其对齐到页面底部.建议?
编辑:我得到的最接近是这 ... :-)
我有这样的布局
<section id="container">
<header></header>
<section id="main"></section>
<footer></footer>
</section>
Run Code Online (Sandbox Code Playgroud)
目前我的网页布局如下:
-------------------
| | 100px height
| HEADER |
|-----------------|
| |
| MAIN | 500px height
| |
|-----------------|
| |
| FOOTER |
|-----------------|
| |
| |
-------------------
Run Code Online (Sandbox Code Playgroud)
我希望页脚跟随主要内容区域延伸到页面底部,如何实现?
-------------------
| | 100px height
| HEADER |
|-----------------|
| |
| MAIN | 500px height
| |
|-----------------|
| |
| FOOTER |
| |
| |
| FOOTER |
-------------------
Run Code Online (Sandbox Code Playgroud)
注意:我注意到到目前为止所有答案都会将页脚固定在页面底部,但是当拖动页脚只是向下移动/主容器展开时,我希望页脚展开.
我认为这很简单,我需要将内部div(绿色和蓝色)对齐到容器的底部(红色).我希望不要使用绝对定位,我需要它是ie6,7,8 ff chrome safari等兼容.
<div style="border:1px solid red;">
<div style="border:1px solid green; width:20px; height:20px; float:left;"></div>
<div style="border:1px solid blue; width:20px; height:30px; float:left;"></div>
<div style="clear:both;"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
我尝试过使用vertical-align但找不到简单的解决方案.
谢谢你的帮助,p.
编辑这里是我对abs pos解决方案的尝试:
<div style="border:1px solid red; position:relative;">
<div style="border:1px solid green; width:20px; height:20px; float:left; position:absolute; bottom:0px;"></div>
<div style="border:1px solid blue; width:20px; height:30px; float:left; position:absolute; bottom:0px;"></div>
<div style="clear:both;"></div>
</div>
Run Code Online (Sandbox Code Playgroud) #Container {
width: 500px;
height: 600px;
}
#TheElement {
width: 500px;
height: 100px;
background-color: #000000;
}
Run Code Online (Sandbox Code Playgroud)
如何将#TheElement锁定到#Container的最底层,无论容器内的其他内容如何,没有一堆边缘欺骗?
我有4个div.一个是外包装,另外三个分别是标题,内容和页脚.所有都是相同(固定)的宽度.但外包装和内容div的高度是可变的.
无论这些大小如何,我都希望页脚div粘在外包装的底部.我尝试过使用以下CSS
position: relative;
bottom: 0px;
Run Code Online (Sandbox Code Playgroud)
但它没有用.有人知道解决方案吗?
我需要在底部保持一个页脚,但它的高度是可变的,所以主要的解决方案不适合我...
我不能做的例子:http : //www.cssstickyfooter.com/ http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
任何人都有灵活的页脚解决方案?谢谢
我正在尝试用div元素填充表格的中心单元格.为了说明问题,div的样式为红色背景.它似乎适用于Chrome,但不适用于IE.在下面的小提琴中,IE将div的高度设置为包含其内容所需的最小高度.通过不同的CSS设置修补这个问题,我设法让IE解释"高度:100%"; 作为"浏览器窗口的高度".但是,正如问题所述,我希望IE将其解释为td单元格的高度.有任何想法吗?
CSS:
*{
padding: 0px;
margin: 0px;
}
html, body{
height: 100%;
}
#container{
height:100%;
width: 100%;
border-collapse:collapse;
}
#centerCell{
border: 1px solid black;
}
#main{
height: 100%;
background-color: red;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<table id="container">
<tr id="topRow" height="1px">
<td id="headerCell" colspan="3">
TOP
</td>
</tr>
<tr id="middleRow">
<td id="leftCell" width="1px">
LEFT
</td>
<td id="centerCell">
<div id="main">CENTER</div>
</td>
<td id="rightCell" width="1px">
RIGHT
</td>
</tr>
<tr id="bottomRow" height="1px">
<td id="footerCell" colspan="3">
BOTTOM
</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud) 更新:我知道添加一个位置:相对;to body 会使元素位于 body 的底部,我只是没有找到当未找到非静态父级时,位置将与什么相关的描述。所以我不认为这个问题与这个问题重复。感谢@Ben Kolya Mansley
====
我正在编写一个组件,遇到了一个问题。我设置了一个元素位置绝对位置和底部0,并将其附加到document.body(主体高度超过屏幕高度),但它不在主体的底部,而是在视口的底部。为什么这么连线?
我读了position和bottom的mdn。它表示具有绝对位置的元素将寻找非静态定位父元素,如果找不到,它将相对于主体。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
height: 1500px;
}
.bar {
position: absolute;
bottom: 0;
}
</style>
<div class="bar">this is bar</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)