相关疑难解决方法(0)
如何将div放在容器的底部？
给出以下HTML:
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>我想#copyright坚持到底#container.
我可以不使用绝对定位来实现这一目标吗 如果float属性支持'bottom'的值,那么似乎可以做到这一点,但不幸的是,它没有.
推荐指数
解决办法
查看次数
如何在右下方的文本中包装文本？
每当我尝试在CSS中做一些看似简单的事情时,它都行不通.
我有一个包含460x160图像的内容div.我想要做的就是将图像放在右下角并将文本环绕在它周围.
<div id="contents">
<img src="..." />
text text text text text text ...
</div>
所以我希望它看起来像:
------------------
| text text text |
| text text text |
| text text -----|
| text text | |
------------------
使用左上角或右上角图像进行操作是蛋糕:
#contents img { float:right; }
------------------
| text text | |
| text text -----|
| text text text |
| text text text |
------------------
现在我该怎么把它推到底部？到目前为止,我提出的最好的是:
#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px
------------------
| text …推荐指数
解决办法
查看次数
如何使div下浮？
我有4个div.一个是外包装,另外三个分别是标题,内容和页脚.所有都是相同(固定)的宽度.但外包装和内容div的高度是可变的.
无论这些大小如何,我都希望页脚div粘在外包装的底部.我尝试过使用以下CSS
position: relative;
bottom: 0px;
但它没有用.有人知道解决方案吗？
推荐指数
解决办法
查看次数
在没有额外标记的情况下,使页脚不会超出屏幕底部
如果您只需要担心Firefox和Webkit浏览器,那么您将使用什么CSS来使下面HTML中的页脚不会超出底部或屏幕(如果正文内容推动它会降低)？注意:我不想在页面中添加任何标记.
<html>
<body>
<header>...</header>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
这是一些复制粘贴html.我如何修改css以使其工作？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
p {
margin-bottom: 10px;
}
article {
display: inline-block;
height: auto;
width: 69%;
}
aside {
display: inline-block;
height: auto;
width: 30%;
}
footer {
height: 30px;
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at …推荐指数
解决办法
查看次数
在div内部浮动一个跨度底部
可能重复:
如何让div浮动到其容器的底部？
我有这个代码将div浮动到div的右下方.但跨度停留在左上角.
<div id="color_tile" class="select_tile" title="Choose color" style="background: grey; background-image: url(wallpaper/201_color_picker.jpg);" >
<span id="color_picker" style="visibility: visible; display: block; float: right; vertical-align: bottom;"></span>
</div>
是否有不同的方式来放置跨度？
推荐指数
解决办法
查看次数
CSS:包含与水平规则对齐的块的多列布局
我正在尝试为以下布局创建CSS.这与表非常相似,但我使用它来呈现不包含表格数据的XML.
我想要两个或更多列以及一个或多个贯穿这些列的水平规则(不可见线).规则之间的垂直空间确定与表的行高完全相同,取决于该行单元格中内容的最大高度.
此"表"中的所有"单元格"包含两个可选块.上部块在上部规则下方对齐.下部块在下部规则上方对齐.这是一个例子:
上面和下面的块都是可选的,因此每个"单元"将具有以下配置之一.块没有固定的高度; 它们可能包含根据"单元格"的宽度包装的文本.
因为这非常像一张桌子,所以我试着用它来渲染它display:table.第一个问题:如何在单个内部创建上部和下部块table-cell？这是我的第一次尝试.
我认为这相当于在其容器底部"浮动"一个块的问题.这个问题的公认答案表明这可能是不可能的.
XML片段
这是我正在尝试渲染的XML的简化示例.
<block>
<horizontal-rule>
<column>
<above-rule>When in the Course of human events</above-rule>
</column>
<column>
<above-rule>to dissolve the political bands</above-rule>
<below-rule>it becomes necessary for one people</below-rule>
</column>
<column>
<below-rule>which have connected them with another</below-rule>
</column>
</horizontal-rule>
</block>
在试图让它工作时,我一直在尝试修改我原来的XML模式.在第二个XML示例中,我不是按相邻的水平规则进行分组,而是按行尝试更像"表"的分组.在翻译中,<above-rule>变得<cell-bottom>和<below-rule>变<cell-top>.我更喜欢原来的,但我在这个方面取得了更多进展.
<block>
<row>
<cell>
<cell-bottom>When in the Course of human events</cell-bottom>
</cell>
<cell>
<cell-top>it becomes necessary for one people</cell-top>
<cell-bottom>to dissolve …推荐指数
解决办法
查看次数
将具有动态高度的块与具有动态高度的外部的右底部对齐
是否有可能以任何方式将具有未知高度的文本块与具有未知高度的父级的右底部对齐？需要纯 CSS。尝试使用 flexbox、float、absolute 定位，但无法弄清楚。
有一个漂亮的答案/sf/answers/1272007691/，但看起来太奇怪了，在不同的浏览器中可能会出错。
将带有文本环绕的图像浮动到右下角仅部分解决了我的问题，因为主题启动器至少有一个已知大小的内部块，但在我的情况下两者都是动态的，因此 calc (100% - 200px) 不起作用就我而言。
推荐指数
解决办法
查看次数
将按钮放在div或屏幕的底部
我想将我的按钮放在div的底部或屏幕的底部(但是处于非固定位置).我的代码结构如下所示:
- DIV-1
- DIV-2
- DIV-3
- 按键
- DIV-3
- DIV-2
我想把按钮放在div 1的底部,使用jQuery设置高度(高度是屏幕的高度,所以将按钮放在屏幕的底部也可能是一个解决方案)
到目前为止我尝试过的:
CSS
.button {
position: fixed;
bottom: 10px;
left: 50%;
margin-left: -104.5px; /*104.5px is half of the button's width*/
}
这使按钮(我想要的东西)居中,并将它放在屏幕的底部,但位置是固定的,所以如果我向下滚动按钮也会下降.我也试着设置按钮的position到absolute和DIV-1的position到relative,这也不能工作.
编辑: div的高度是可变的,因此边距可能不是一个很好的选择
推荐指数
解决办法
查看次数
如何在屏幕底部修复页脚,无论浏览器或设备如何？
我知道粘性页脚.但我的情况是,我正在开发一个将用于PC和移动设备的网站.因此,显示的页脚由屏幕宽度调整.
页脚的高度会在每个分辨率上发生变化.
任何人都可以知道如何在页面底部(而不是屏幕)显示页脚.某些页面的高度很小,页脚显示在页面之间.
我有以下结构:
<body style="height:100%;">
<div style="height:100%;">
<div id="wrapper" style="height:100%; max-width:800px;">
<div id="header">
some content
</div>
<div id="content">
some content
</div>
<div id="footer" style="position:relative; width:100%;">
some content
</div>
</div>
</div>
</body>
推荐指数
解决办法
查看次数