如何解决让我的DIV对齐似乎很困难
| 我有一个非常简单的代码:<div>
<div>
<div>Topic</div>
<div>Sub Topic</div>
</div>
<div>
<div>test 1</div>
<div>Test 2</div>
</div>
</div>
但是我想让“ test 1”出现在Topic的右边。现在它显示在下面。有没有办法解决CSS?
解决方法
<div>
<div style=\"float:left;width:200px;\">
<div>Topic</div>
<div>Sub Topic</div>
</div>
<div style=\"float:left;width:200px;\">
<div>test 1</div>
<div>Test 2</div>
</div>
<div style=\"clear:both;\"></div>
</div>
,就像我的评论一样,我在这里使用dl
元素。
HTML的语义要远得多,并且要轻得多:
请参阅:http://jsfiddle.net/46WRw/
<dl class=\"topics\">
<dt>Topic</dt>
<dd>test 1</dd>
<dt>Sub Topic</dt>
<dd>Test 2</dd>
</dl>
.topics {
overflow: hidden; /* clear floated child elements */
background: #ccc;
width: 200px
}
.topics dt,.topics dd {
margin: 0;
padding: 0;
float: left;
width: 50%
}
.topics dt {
font-weight: bold
}
,像其他人一样,我将使用float: left
,但是您也需要像本jsFiddle演示中一样清除父div。
HTML:
<div class=\"clearfix\">
<div class=\"floatLeft\">
<div>Topic</div>
<div>Sub Topic</div>
</div>
<div class=\"floatLeft\">
<div>test 1</div>
<div>Test 2</div>
</div>
</div>
Hello
CSS:
div {
margin: 10px;
padding: 10px;
border: dotted 1px black;
}
.floatLeft { float: left; }
/* The Magnificent Clearfix:
Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before,.clearfix:after {
content: \"\\0020\";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
/* Fix clearfix:
blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
,不要使用div。 (尽管可以使用float:right
和float:left
在同一行上对齐div)
使用表:
<table>
<tr>
<td>Topic</td>
<td>Test 1</td>
</tr>
<tr>
<td>Sub Topic</td>
<td>Test 2</td>
</tr>
<tr>
</tr>
</table>
,<div>
<div style=\"float:left\">
<div>Topic</div>
<div>Sub Topic</div>
</div>
<div style=\"float:left\">
<div>test 1</div>
<div>Test 2</div>
</div>
</div>
如果是列表数据,则可以使用表。这是完全正确的事情。
,实际上,使用选择器应该很容易。
div div div{
display: inline;
}
这将只选择两个12个孩子的12个孩子。
,我建议您使用CSS框架来执行此操作。我个人最喜欢Blueprint。即使使用CSS达到页面布局的高级水平,框架仍然可以帮助实现琐碎的效果,就像您很快描述的那样。
查看:
http://www.blueprintcss.org/
http://www.blueprintcss.org/tests/
http://www.blueprintcss.org/tests/parts/sample.html
有关更多信息和示例代码。
高温超导
,div { overflow:hidden; width:100% }
div div { width:auto; float:left }
div div div { float:none }
无需清算div
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。