我有以下HTML:
<div>
<button>b1</button>
<button>b1</button>
<button>b1</button>
<span>Heading</span>
<span>Status</span>
</div>
如果div很宽,我希望这样显示:
|-------------------------------------------|
| b1 b2 b3 Heading Status |
|-------------------------------------------|
如果div很宽,我希望这样显示:
|----------------------------------------------------------------------------------|
| b1 b2 b3 Heading Status |
|----------------------------------------------------------------------------------|
当div太窄而无法容纳所有东西时,应该发生一些合理的事情。
|--------------------------|
| Heading |
| b1 b2 b3 Status |
|--------------------------|
要求摘要:
实现这种布局的最佳方法是什么?
答案 0 :(得分:0)
我不确定这是不是你想要的,但是我对html http://jsfiddle.net/dj0p1tqx/
进行了一些改动。我所要做的就是将它们放在容器中,并且等于width:33.333%
答案 1 :(得分:0)
css代码
<style type="text/css">
div {
margin: 0 auto;
position: relative;
display: block;
width: 100%;
text-align: center;
}
button {
float: left;
}
.position-right {
float: right;
}
</style>
和html:
<div>
<button class="position-left">b1</button>
<button class="position-left">b1</button>
<button class="position-left">b1</button>
<span class="position-left">Heading</span>
<span class="position-right">Status</span>
</div>
答案 2 :(得分:0)
你可以这样做:http://jsfiddle.net/csdtesting/74ShU/40/
.mainDIV {
position: relative;
width: 100%;
min-width: 315px;
}
.leftDIV {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
width: 130px;
}
.middleDIV {
height: 50px;
width: 100px;
margin: 0px auto;
}
.rightDIV {
position: absolute;
top: 0px;
right: 0px;
height: 50px;
width: 100px;
}
<div class="mainDIV">
<div class="leftDIV">
<button>b1</button>
<button>b1</button>
<button>b1</button>
</div>
<div class="middleDIV"> <span>Heading</span>
</div>
<div class="rightDIV"> <span>Status</span>
</div>
</div>