HTML元素的分层垂直和横向划分
HTML元素的分层垂直和横向划分
提问于 2015-06-24 12:53:05
如果这个问题已经回答了，我很抱歉，这似乎是一个基本的问题，但我一直未能找到解决办法。
问题：
我想在这个布局中安排HTML中的元素(其中a和b是任意元素)：
aa
a
bb
b示例：
我尝试过这样做，使用按钮作为任意元素(JSFiddle链路)：
<!DOCTYPE html>
<html>
<head>
<style>
.left {
float: left;
/*display: inline-block;*/
}
</style>
</head>
<body>
<div>
<div class="left">
<div>
<button type="button">a</button>
</div>
</div>
<div class="left">
<div>
<button type="button">a</button>
</div>
<div>
<button type="button">a</button>
</div>
</div>
</div>
<div>
<div class="left">
<div>
<button type="button">b</button>
</div>
</div>
<div class="left">
<div>
<button type="button">b</button>
</div>
<div>
<button type="button">b</button>
</div>
</div>
</div>
</body>
</html>但我得到了这个
aabb
a b当我使用inline-block时，我得到了这个(仍然是错误的)：
a
aa
b
bb有解决办法吗？有什么不同的方法吗？
回答 2
Stack Overflow用户
发布于 2015-06-24 13:09:47
在周围的div中放置一个包装类：
<div class="wrapper">
<div class="left">
<div>
<button type="button">a</button>
</div>
</div>
<div class="left">
<div>
<button type="button">a</button>
</div>
<div>
<button type="button">a</button>
</div>
</div>
</div>并使用此css：
.left {
float: left;
}
.wrapper {
display: block;
float: left;
width: 100%;
}Stack Overflow用户
发布于 2015-06-24 13:10:27
你的html是错的。使用clear:两者都修复html。
<div>
<div class="left">
<div>
<button type="button">a</button>
</div>
</div>
<div class="left">
<div>
<button type="button">a</button>
</div>
<div>
<button type="button">a</button>
</div>
</div>
</div>应该是
<div>
<div class="left">
<div>
<button type="button">a</button>
</div>
<div>
<button type="button">a</button>
</div>
</div>
<div class="left">
<div>
<button type="button">a</button>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31027146
复制相关文章
相似问题
腾讯云开发者
