相关疑难解决方法(0)
你可以在不使用表格的情况下进行HTML布局吗？
好吧,我一两周前有一个简单的布局问题.即页面的部分需要标题:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
非常简单的东西.桌面仇恨似乎已经在Web世界中占据了,当我问为什么使用HTML表单的定义列表(DL,DD,DT)标签而不是表格时,我被提醒了？ 现在已经讨论过表vs divs/CSS的一般主题,例如:
- DIV vs Table ; 和
- 表而不是DIV.
因此,这不是关于CSS与布局表格的一般性讨论.这只是一个问题的解决方案.我使用CSS尝试了以上的各种解决方案,包括:
- 浮动按钮或包含按钮的div;
- 相对于按钮的位置; 和
- 位置相对+绝对.
由于各种原因,这些解决方案都不令人满意.例如,相对定位导致z-index问题,其中我的下拉菜单出现在内容下.
所以我最终回到:
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>
而且效果很好.它很简单,因为它具有向后兼容性(即使在IE5上也可以工作)并且它只是起作用.没有搞乱定位或花车.
所以任何人都可以做没有表的等价物吗？
要求是:
- 向后兼容:到FF2和IE6;
- 合理一致:跨越不同的浏览器;
- 垂直居中:按钮和标题具有不同的高度; 和
- 灵活:允许合理精确控制定位(填充和/或边距)和样式.
在旁注中,我今天看到了几篇有趣的文章:
推荐指数
解决办法
查看次数
将文本与div的底部对齐
我试图将我的文本与其他帖子和div的底部对齐stackoverflow我学会用不同的css属性来处理这个问题.但我无法完成它.基本上我的html代码是这样的:
<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
<span style='position:absolute; bottom:0px;'>A Text</span>
</div>
结果是在FF中我只得到垂直线(以折叠方式的div)并且文本被写在它旁边.如何防止div折叠但宽度适合文本？
推荐指数
解决办法
查看次数
Escape </ in script标签内容
在HTML中,标签和实体不在<script>标签内解析,并</立即结束标签.从而,
<script><b>fun & things</
将为您提供包含确切内容的脚本标记<b>fun & things.
如果您包含JSON并且希望</在脚本中包含字符,则可以替换它,<\/因为这些字符出现的唯一位置是字符串,并且\/是转换为单个正斜杠的转义序列.
但是,如果你不使用JavaScript,那么这个技巧就行不通了.在我的情况下,我特意试图<script type="math/tex">在源代码中插入一个,以便MathJax处理它.有没有办法逃脱</原始的HTML源代码？(我没有特别需要,</但我正在编写一个通用工具,并希望能够使用任何文本.)
(可以在JavaScript中创建脚本标记并填充它innerText,但我正在使用原始HTML,所以我不能这样做.)
推荐指数
解决办法
查看次数
即使内容较少,如何在网页的右下角对齐div？
我在这里有一个非常简单的启动页面:http://iph0wnz.com
它的主图形位于中间,其次是我的'a'.右下方的徽标.我希望该徽标与整个页面的右下角对齐,这意味着如果页面中有很多文本内容,它会显示在所有内容之后(即它不会悬停在顶部),但是如果内容较少 - 就像现在一样 - 然后它应该与屏幕的最底部对齐,而不是在内容之后.
我将尝试给出一个文本示例,就像我在如何将div的内容对齐到底部一样？:
-----------------------------
| less content, no scroll |
| |
| |
| |
| a. |
----------------------------- (screen height)
和
-----------------------------
| more content, yes scroll |
| the quick brown fox jump- |
| ped over the lazy dog an- |
| d she sells sea shells on |
| the sea shore and some o- |
| ther random text is put … 推荐指数
解决办法
查看次数
从底部到顶部包装HTML元素
是否可以通过HTML/CSS在容器底部显示一行元素,如果容器变小,它会向上包裹？就像我们开始在页面底部写作并继续在已经写好的行之上.
元素不需要是内联文本的单词,像SPAN或DIV这样的元素集合放置在文本中float:left;,例如也可以.
推荐指数
解决办法
查看次数
是否可以将文本对齐到行高的底部？
我查看了材料设计规范，发现它们的行高为20px，字体大小为14px，但文本仍与底部对齐。
我尝试复制它，但是它比我想象的要复杂得多。我来给你展示。
.a {
background-color: rgba(0,0,0,0.1);
line-height: 40px;
font-size: 24px;
}
.b {
margin-top: 16px;
position: relative;
overflow: hidden;
}
.b > p {
background-color: rgba(0, 0, 0, 0.2);
display: block;
padding: 0;
margin: 0;
font-size: 24px;
line-height: 56px;
transform: translateY(16px);
}<div class="a">
This text is vertically centered.
</div>
<div class="b">
<p>This text is also translated down to counter-act line-height. This text is also translated down to counter-act line-height. This text is also translated down to counter-act …推荐指数
解决办法
查看次数
将块元素放在字段集的右下角
推荐指数
解决办法
查看次数
Bootstrap 3 - 如何在同一行中使用不同的字体大小,同时对齐底部的所有文本
我是Bootstrap的新手.我想在同一行中有两列文本,但第一列的字体比第二列大得多.当我这样做时,第二列中的文本似乎高于第一行.我希望两列中的文本在底部对齐.
这是现在的样子.注意"亚特兰大"垂直对齐方式高于"John Doe" http://bootply.com/83705
推荐指数
解决办法
查看次数
如何使用 CSS 将一个元素放置在另一个元素的底部？
看看这个：http : //jsfiddle.net/unimous/88uqJ/
<div id="d1">
<div id="d2">
</div>
</div>
#d1 {
height: 3000px;
background-color: red;
}
#d2 {
background-color: green;
height: 40px;
width: 40px;
position: absolute;
bottom: 0px;
}
我想让 div d2 出现在 d1 的底部，而不是屏幕的底部。
为什么position: absolute在这里不起作用？
推荐指数
解决办法
查看次数
如何在div的底部中心对齐图像
我想将图像对齐到div 的底部,并且还希望将其水平居中.
这就是我想要完成的事情(如下图所示),但在我的项目中,母牛之间存在巨大差距.牛的图片被切成两半,所以我希望底部部分在响应时粘在视口的底部.
HTML:
<div class="main">
<div class="container">
<div class="nav">
<ul>
<li><a href="index.html" >Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="main_text">
<h1>Awh Cow! I got no <span class="yellow">Dribbble</span>.</h1>
<p>Invite me to Dribbble maybe? Thanks.</p>
</div>
<a href="mailto:hi@gauthamsk.com" class="button">Visit Profile</a>
<div class="cow"></div>
</div> <!-- end container -->
</div> <!-- end main -->
CSS:
.cow {
height: 280px; /* Change this height to change the size of the cow */
background: url(../images/cow.png) bottom center no-repeat;
background-size: contain; …推荐指数
解决办法
查看次数
居中对齐容器div并将文本对齐div的底部
我想要实现的目标:将容器div(包含两个div)和第二个div中的底部对齐文本居中
- 在我的第一个div中,这是一张照片
在我的第二个div,两段文字
Run Code Online (Sandbox Code Playgroud)———————----- | | | | column2 | column1 | -———————------- | picture | | Paragraph | | | ———————-------- | | ———————————------------------ | | | a paragraph of text | | | | of text of text of text of | ——————----—— ———————----------------------
我的问题:
我无法将我的两段对齐在底部.他们位居榜首.
我的容器div也没有与中心对齐
目前它们看起来像这样:
———————----- -———————-------
| picture | | Paragraph |
| | ———————--------
| | ———————————------------------
| | | a paragraph of text |
| | | of text of text …推荐指数
解决办法
查看次数
将整个表格对齐页面底部
我使用以下编码来对齐底部的表格,但它无法正常工作
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="black">
<div class="footer">
<table border="1" bottom="0px">
<tr>
<td width="600px" align="right">
<input type="image" align="center" id="verify1" src="proceed1.png" disabled="disabled" width="90" height="90""/>
</td>
<td width="500px" align="right">
<label id = "l2" style = "color:white;font:normal 20px chalkdust;">NEXT QUESTION</label>
<div id="sample4" style="float: right;">
</td>
<td>
<input type="image" id="next" src="arrow.png" disabled="disabled" name="image2" width="80" height="80">
</td>
</tr>
</table>
</div>
</body>
</html>
任何人都可以帮助它在页面底部对齐.
推荐指数
解决办法
查看次数